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

一、首先你要购买一个服务器或者有自己的服务器。我介绍给大家的一个免费的服务器: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. 【C#】【WPF】如何读写app.config文件

    WPF生成的项目中会有.exe.config.一般是系统默认配置的 格式是xml格式,C#的项目可以直接读写这些文件.方法代码如下. public static string GetConnectio ...

  2. 毕业设计之感悟 —— UML 与 ER 图

    今天毕业设计答辩,虽然我第一个上场,但是不是特别紧张,因为整个系统都是我写的.我以为自己天衣无缝,能应付所有老师的所有问题.事实上,我被老师教育了一番. 老师说我,毕业论文中没有一个类.我一开始比较懵 ...

  3. WPF关闭应用汇总

    原文:WPF关闭应用汇总 就本人而言,C#中关闭应用主要有以下途径: 1.Close():关闭当前窗口,可以在OnClosing和 OnClosed中捕获消息,在OnClosing的时候,可以取消关闭 ...

  4. 细谈unity资源管理的设计

    一.概要 本文主要说说Unity是如何管理的,基于何种方式,基于这种管理方式,又该如何规划资源管理,以及构建bundle,是后面需要详细讨论的. 二.Unity的资源管理方式 2.1 资源分类 uni ...

  5. C# 开机自动启动

    if (ConfigurationManager.AppSettings["IsBoot"].ToString().Trim().ToUpper() == "TRUE&q ...

  6. Resolve conflict using "MERGE_HEAD (origin/HEAD)"

    Git进行同步的时候,经常会出现冲突,有时候冲突的选项会有图示中的三种选项: 1.Resolved:直接把文件标识为冲突已经解决,一般是自己手动查看并解决完冲突以后使用. 2.Resolve conf ...

  7. SQLSERVER使用密码加密备份文件以防止未经授权还原数据库

    原文:SQLSERVER使用密码加密备份文件以防止未经授权还原数据库 SQLSERVER使用密码加密备份文件以防止未经授权还原数据库 在备份数据库的时候,用户可以为媒体集.备份集或两者指定密码 在ba ...

  8. .NET重思(二)接口和抽象类的取舍

    不得不说,接口和抽象类好像啊~两者都不可以实例化,并且未实现的部分都是由派生类实现的. 他们主要有这么个区别: (1)抽象类的派生类可以是派生类,换言之,抽象成员在派生类中不一定完全实现,而接口要求其 ...

  9. [Erlang-0016][aque_tcp] 一个 Erlang TCP 组件

    项目地址:https://github.com/liangjingyang/aque_tcp 欢迎任何形式的转载,但请务必注明出处:http://www.cnblogs.com/liangjingya ...

  10. 完全卸载mysql免安装版

    使用以下命令 reg delete "HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\services\eventlog\Application\MySQL& ...