你完成了工程开发,需要部署到外网环境,要进行下面的步骤:

一、首先你要购买一个服务器或者有自己的服务器。我介绍给大家的一个免费的服务器:http://free.3v.do/index.html可以免费内存空间100M;

二、修改项目config文件夹->index.js文件夹->assetsPublicPath(在build里边)@“/”改为@“./”,如:

module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},

然后:npm run build下生成一个dist文件夹,直接点开dist问价夹下的index.html就是你的项目,其他的static是你的资源文件;

这时候能打开就没问题,现在就是把dist目录下的所有文件(记住是dist文件下的)。

三、寻找上传工具:我用的都是免费的Yummy FTP;

绑定账号:

上传你的代码:

现在就打开你的域名:http://anneandpeter.3vcm.net/#/

就有你自己的项目网页了:(我用的是内网的ip,所以数据你们看不到,数据没有发布到外网)

vue.js打包部署线上的更多相关文章

  1. 如何把vue.js项目部署到服务器上

    如何把vue.js项目部署到服务器上面,我用的是tomcat服务器 1-改一下config/index.js文件,如下图,把assetsPublicPath: './', productionSour ...

  2. 如何将你的 Vue.js 项目部署在云开发静态托管之上

    云开发静态托管是云开发提供的静态网站托管的能力,静态资源(HTML.CSS.JavaScript.字体等)的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持. 在云开发静态托 ...

  3. vue中解决chrome浏览器自动播放音频 和MP3语音打包到线上

    一.vue中解决chrome浏览器自动播放音频 需求 有新订单的时候,页面自动语音提示和弹出提示框: 问题 chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.严格地来说, ...

  4. 【转】vue项目打包部署——nginx代理访问

    我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要 ...

  5. vue项目 打包部署上线

    1. npm run dev:本地开发的时候做调试用的. 2. npm run build:打包部署上线,生成一个 dist 文件夹. 注意:用 npm run build 时,常遇到因引用路径不对导 ...

  6. Vue.js系列之vue-router(上) (转载自向朔1992)

    概述 Vue非常适用于实践单页面应用程序也就是平时大家说的比较多的SPA(single page application),这点应该了解过Vue的应该都知道吧.一般的单页面应用是基于路由或页面之间的链 ...

  7. vue.js 打包时出现空白页和路径错误

    vue-cli输入命令:npm  run  build 即可打包vue.js的项目 打包出来后项目中就会多了一个文件夹dist,下图为我们打包过后的项目 我们直接运行打包后的文件夹中的index.ht ...

  8. 本地虚拟机部署线上php程序---不需要修改数据库信息

    1.特别注意:拿来线上php程序后一般是不需要修改config.php里面的数据库连接信息的,如果修改了会报错:站点已关闭.所以 2.5 步骤是需要省略的.如果拿来的是最开始的php源码,需要配置原始 ...

  9. express框架开发接口部署线上环境PM2

    1.PM2介绍 PM2是一个线上环境下,用于启动nodejs进程守护的工具,用来保证服务的稳定及分摊服务器进程和压力. 2.下载安装 npm install pm2 -g  => pm2 --v ...

随机推荐

  1. Android开发四大件

    四大组件 Activity Activity是Android应用程序的界面,比如查看联系人.打电话.玩游戏的界面等一个应用程序通常包含多个Activity,即多个界面Activity通过布局管理各种V ...

  2. 工具:sql server profiler(分析器)

    打开profiler新建->连接数据库进行监测 任何访问该数据库的都有记录   image 对于linq的检验:sql实际如何->运行程序,查看分析器记录   image         ...

  3. js的位置和执行情况

    放到<head>中的<script>在body加载之前就已经运行了. 写在body中的<script>是随着页面的加载而一个个执行的.

  4. WPF 简单的绕圈进度条(无cs代码)

    方案: 图标位置不变化的情况下设置透明度实现 代码: <Window x:Class="WpfApp1.MainWindow" xmlns="http://sche ...

  5. Gradle编译失败 generating the main dex list

    编译打包的时候出现这个错误,信息很少. * What went wrong: Execution failed for task ':camCard_Asia_Trunk:transformClass ...

  6. QDialog之屏蔽Esc键(简单深刻,要么重写keyPressEvent然后break忽略此事件,要么重写eventFilter然后return,都是为了忽略此事件)

    简述 Qt中Esc键会在一些控件中默认的进行一些事件的触发,比如:QDialog,按下Esc键窗口消失.大多数情况下,我们不需要这么做,那么就需要对默认事件进行屏蔽. 简述 源码分析 事件过滤器 事件 ...

  7. 解决WPF中TextBox文件拖放问题

    在WPF中,当我们尝试向TextBox中拖放文件,从而获取其路径时,往往无法成功(拖放文字可以成功).造成这种原因关键是WPF的TextBox对拖放事件处理机制的不同,具体可参考这篇文章Textbox ...

  8. 批处理(bat)实现SQLServer数据库备份与还原

    原文:批处理(bat)实现SQLServer数据库备份与还原 备份数据库.bat @echo off set path=%path%;C:\Program Files (x86)\Microsoft ...

  9. [PowerDesign]将数据库从SQL Server数据库转换为MySQL

    原文:[PowerDesign]将数据库从SQL Server数据库转换为MySQL 一.迁移Database Schema. 首先使用Sybase Powerdesigner的逆向工程功能,逆向出S ...

  10. [Game-0001] 新手引导逻辑梳理

    欢迎任何形式的转载,但请务必注明出处:http://www.cnblogs.com/liangjingyang 欢迎任何形式的转载,但请务必注明出处:http://www.cnblogs.com/li ...