“随着前后端分离项目的流行，vue项目开发部署也成为了前端人员必备技能；本文将带你学习vue项目部署及遇到的各种坑。”
关于vue项目部署不得不提的是配置文件vue.config.js。
注：本文使用最新vue3.0版本，如果你使用的是vue2.0配置方式略有不同。
vue.config.js是一个可选的配置文件，如果项目的 (和package.json同级的) 根目录中存在这个文件，那么它会被自动加载。
// vue.config.jsmodule.exports = {// 选项...}
01
—
vue项目部署到根路径
vue.config.js选项publicPath用于配置"部署应用包时的基本 URL"。
默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如https://www.my-/。
也就是将项目部署到域名根路径的情况下选项publicPath使用默认值不用设置。
module.exports = {// publicPath: '/', 部署项目到域名根路径的情况下选项publicPath不用设置。outputDir: 'dist', // 输出文件目录assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)...}
以“雨果学院后台管理中心”项目为例，
npm build打包应用
将编译包拷贝到nginx服务器html目录下
目录：D:\nginx-1.17.7\html/disk50x.htmlindex.html
3. 修改nginx配置文件nginx.config
# D:\nginx-1.17.7\conf\nginx.confglocation / {#roothtml; 原配置roothtml/dist;#修改后配置indexindex.htmlindex.htm;}
4. 启动nginx服务
项目效果如下:
5.遇到的问题
我们知道vue单页应用有两种加载模式，一种是默认的hash模式,一种是history模式，为了美观起见正式上线的应用中都会使用history模式。
在history模式下，当刷新浏览器时会出现404错误
解决方法修改nginx.config文件，添加try_files $uri $uri/ /index.html;
location / {root html/dist;index index.html index.htm;try_files $uri $uri/ /index.html; #加上这句即可使用history模式进行路由}
02
—
项目部署到子路径
默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如https://www.my-/。如果应用被部署在一个子路径上，你就需要用publicPath选项指定这个子路径。例如，如果你的应用被部署在https://www.my-/my-app/，则设置publicPath为/my-app/。
1. vue.config.js配置
module.exports = {publicPath: '/my-app/', //访问子目录:http://www.my-/myappoutputDir: 'dist', // 输出文件目录assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)}
为了在开发环境方便测试一般如下配置
module.exports = {publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/',outputDir: 'my-app', // 输出文件目录assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)}
2. 记得修改路径router.js
const router = new VueRouter({mode:'history',//使用history模式base: '/my-app/',//默认路径process.env.BASE_URL,routes})
3.nginx.config配置
location / {root html;index index.html index.htm;try_files $uri $uri/ /index.html; #加上这句即可使用history模式进行路由}
03
—
centos部署nodejs项目
1.下载Node.js安装包。
wget /dist/v6.9.5/node-v6.9.5-linux-x64.tar.xz
2.解压文件
tar xvf node-v6.9.5-linux-x64.tar.xz
3. 创建软链接，您就可以在任意目录下直接使用node和npm命令。
ln -s /root/node-v6.9.5-linux-x64/bin/node /usr/local/bin/nodeln -s /root/node-v6.9.5-linux-x64/bin/npm /usr/local/bin/npm
4. 查看node、npm版本
node -vnpm -v
5.为了让nodejs在后台运行我们需要安装forever插件
全局安装forever
npm install forever -g
6.进入项目目录，运行
forever start ./bin/www
7.查看forever运行的项目
forever list
8.停止服务
forever stop 12528
04
—
总结
本文介绍了vue项目在history模式下打包部署的过程及遇到的问题，然后介绍了nodejs后台项目在centos上的安装运行。关于vue项目部署网上有很多介绍，一些是在vue2.0基础上介绍的，大家在使用时一定小时。更多vue配置建议大家参考官方vue.config.js配置文档，很多问题都可以找到答案。比如关于publicPath相对路径配置问题官方描述：
publicPath这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径，也可以用在类似 Cordova hybrid 应用的文件系统中。相对 publicPath 的限制相对路径的 publicPath 有一些使用上的限制。在以下情况下，应当避免使用相对 publicPath:当使用基于 HTML5 history.pushState 的路由时；当使用 pages 选项构建多页面应用时。
