Vue.Js+SpringBoot 打包部署至生产环境

JavaScript011

Vue.Js+SpringBoot 打包部署至生产环境,第1张

在 config/index.js 中有开发环境与生产环境的相关配置。

工程build相关配置:

其中 env: require('./prod.env') 指生产环境配置信息。存放在 prod.env.js 内,具体内容为:

修改完毕后,进行打包并与后台工程合并部署。

小鸟云服务器niaoyun实例创建好之后,您可以使用以下任意一种方式登录服务器:

远程桌面连接(MicrosoftTerminalServicesClient,MSTSC):采用这种方式登录,请确保实例能访问公网。如果在创建实例时没有购买带宽,则不能使用远程桌面连接。

管理终端VNC:无论您在创建实例时是否购买了带宽,只要您本地有网页浏览器,都可以通过管理控制台的管理终端登录实例。

使用远程桌面连接(MSTSC)登录实例

打开开始菜单>远程桌面连接,或在开始菜单>搜索中输入mstsc。也可以使用快捷键Win+R来启动运行窗口,输入mstsc后回车启动远程桌面连接。

在远程桌面连接对话框中,输入实例的公网IP地址。单击显示选项。

输入用户名,如小鸟云默认为niaoyun。单击允许我保存凭据,然后单击连接。这样以后登录就不需要手动输入密码了。

在搞清root,alias,try_files的基本用法后,我开始尝试vue项目的部署。

(用法我之前的文章也研究过)

此前,听说挺多小伙伴会遇到vue-router-history模式种种问题,比如路径无法匹配,找不到静态资源,刷新页面404,etc...

不急,只要找到原因,问题是可以迎刃而解的。

项目部署环境一般可以分为三种:生产环境,测试环境,开发环境。

开发环境 :开发环境时程序员专门用于开发的服务器,配置可以比较随意,为了开发调试方便,一般打开全部错误报告和测试工具,是最基础的环境。

生产环境 :生产环境是指正式提供对外服务的,一般会关掉错误报告,打开错误日志,是最重要的环境。部署分支一般为master分支。

测试环境 :一般是克隆一份生产环境的配置,一个程序在测试环境工作不正常,那么肯定不能把它发布到生产服务器,是开发环境到生产环境的过渡环境。

测试环境的分支存在bug,一般不会让用户和其他人看到,并且测试环境会尽量与生产环境相似。

如何区分生产环境和开发环境?

process.env.NODE_ENV 是 node 的全局变量 process 的一个属性,它的作用是区分当前环境是生产环境还是开发环境,

可以参考学习: 理解webpack中的process.env.NODE_ENV

其实一般的vue单页面应用项目中,遇到路径无法匹配,或者资源引用错误问题都是由于以下几个属性造成的,如果你经常翻官网文档,那看到这里应该就已经会意,他们分别是:

接下来我将讲解以下这几个属性的使用。

依照官网的解释,贴一张用法图:

当使用基于 HTML5 history.pushState 的路由时,“相对 publicPath” 会受到限制,即是说在使用history模式时,publicPath需要设置为绝对路径。那么在vue.config.js文件中,你应该这样配置:

在nginx配置文件中你就需要这样配置:

假设我的项目名为history,并且放在/usr/local/webserver/nginx/myProject 目录下,如tree图

示例贴一下: 珂朵莉的服务器 (点击about会使用路由跳转)

如果你的配置出现页面空白,或者404访问错误,资源引用问题(F12可观察),这时你就要检查publicPath,assetsDir甚至是nginx有没有配置正确了。

我觉得原因是页面刷新时,服务器找不到任何的静态资源,就报404,那么解决办法就简单了: 你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。即使用try_files 寻找index.html。

可以参考本项目的nginx配置:

但如此配置后,你的服务器就不再返回 404 错误页面,因为对于所有路径都会返回 index.html 文件。为了避免这种情况,你应该在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。

参考官网例子:

另一方面,有可能是Vue-Router没有配置好,需要注意初始化Router时候的base参数:

如此项目部署就完成了。

感谢博哥指出之前文章错误之处,已经修正,谢谢