vue-cli使用 npm run build打包后流程

目前,使用vue-cli脚手架写了一个前端项目,之前一直是使用npm run dev 在8080端口上进行本地调试。突然想使用npm run build进行上线打包,试试能否成功看到我的项目效果。

1. npm run build命令。

vue-cli使用 npm run build打包后流程
**

2.一开始运行npm run build 命令时,有这么一段提示:

**
vue-cli使用 npm run build打包后流程
这段话的意思就是说:

构建文件务必放在一个HTTP服务器。直接打开index.html文件将不工作。

到项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”,改为“./”即可,就在前面加个点就可以了
vue-cli使用 npm run build打包后流程

3.现在再重新打包一次 npm run build,刷新你的页面,应该就可以看到啦

如果index.html页面还是空白说明你还没在电脑上安装服务器,

推荐使用nginx

1. 初识nginx
Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行。其特点是占有内存少,并发能力强,事实上nginx的并发能力确实在同类型的网页服务器中表现较好,*使用nginx网站用户有:百度、京东、新浪、网易、腾讯、淘宝等
2. nginx下载
添加链接描述
官方网址:http://nginx.org/en/download.html
vue-cli使用 npm run build打包后流程
下载完成以后,得到nginx压缩包;
vue-cli使用 npm run build打包后流程

**

*3. nginx启动

**

注意不要直接双击nginx.exe,这样会导致很多问题。

我们使用命令行工具进行nginx的启动、停止和重启工作。

使用Win+R快捷键打开命令行窗口,并切换到nginx.exe所在的目录,我们使用start nginx命令来启动nginx。

我们使用nginx -s stop来快速停止nginx,使用nginx -s quit 完整的停止nginx。
4. 运行预览

vue-cli使用 npm run build打包后流程
vue-cli使用 npm run build打包后流程
难道不需要改配置吗?不需要!!!!但是我们还是来看看Nginx的conf目录下的nginx.conf文件

vue-cli使用 npm run build打包后流程

怎么查看效果呢?server_name+listen =====>**

http://localhost:8089

**,回车就可以啦!比XAMPP方便好用太多了。什么配置都不需要!!!