我的VUE-PHP全栈项目终于做好了,今天进行打包、上线。
这是我第一次发布Vue项目+部署Nginx服务器。
本文章将记载打包的步骤、遇到的问题等。以供将来参考。
1.首先什么也不配置,裸打包试试!
npm run build。直接执行打包,然后在webstorm里边运行(点击右上角的浏览器图标)。
发现首页空白。
2.配置打包路径,增加一个点. (P.S:我的线上服务器是部署到根目录,所以这个点之后又删掉了)
服务器运行,发现跑起来了。但是有2个问题:
①我的项目是多页面的入口。(名字是:app、user)项目目录如下:
目前只有app页面能打开,user页面404。
②这样的路由地址(History模式)报404。
3.配置多页面打包
1.打开conf/index.js。配置如下:
2.打开build下的webpack.prod.conf.js。在plugins: []里边,新增配置如下:
4. 配置Vue路由的history模式。
在nginx.conf里面的location / {}里面新增一行:
try_files $uri $uri/ /index.html;
运行项目。APP页面OK,但User页面打不开,跳转到了首页。再新增配置:
运行成功。
5.配置后台接口的反向代理
我的后台是PHP,npm run dev的时候,是这样设置的index.js里面的“proxyTable”。
现在来继续配置Nginx的nginx.conf:
刷新网页,运行成功!
6.Element的CSS显示错误。
之前我在app.Vue里面(根组件)里边覆盖了一些Element的样式。但Nginx服务器上没有生效。
这是因为本地、服务器引入CSS的方式不一样。
解决方法很简单:
把Element的CSS引入,放在引入App.vue前面。
【结语】
到此为止,我的项目已经成功的在Nginx上跑起来了。
但之后我也遇到很多问题,比如:
①网页打开速度慢。——通过GZip、不打包console.log、引入CDN的VUE、element等库,加快了速度。
(之前10几秒,现在3秒之内)
②上传文件时,没有权限。——通过Chmod 赋权限解决。
③数据库错误(之前PHP里写的是Mysql的ip地址)——改为127.0.0.1
④配置Https时,Nginx缺少模块支持——新增、加载这个模块。
项目还有很多值得优化的地方。比如按需加载element的组件,Axios封装一下。
路由懒加载+图片懒加载。组件的重用。部署CDN。
另外我的许多配置文件都是默认的。可能自己了解、配置一下性能会更高。
继续尝试!