Vue项目部署到服务器

前后端分离普及之后，把 Vue 项目部署到 Nginx、把 Node 服务跑在 CentOS 上，成了前端的基本功。本文按原文记录根路径、子路径、history 刷新 404，以及 forever 常驻进程，并保留全部截图和命令。

配置文件是 vue.config.js。它和 package.json 同级时会被 Vue CLI 自动加载。原文基于 Vue 3.0，Vue 2 的写法会略有不同。

// vue.config.js

module.exports = {
  // 选项...
}

一、部署到域名根路径

publicPath 是“部署应用包时的基本 URL”。默认假定挂在域名根上，例如 https://www.my-app.com/，这时可以不写 publicPath。

module.exports = {

     // publicPath: '/', 部署项目到域名根路径的情况下选项publicPath不用设置。

      outputDir: 'dist', // 输出文件目录

       assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)

       ...

}

以“雨果学院后台管理中心”为例，步骤如下。

• npm build 打包应用（按项目脚本也可能是 npm run build）
• 把编译产物拷到 Nginx 的 html 目录
• 改 nginx.conf 的 root
• 启动 Nginx

目录：D:\nginx-1.17.7\html
/disk
50x.html
index.html

修改 Nginx 配置文件 nginx.conf：

# D:\nginx-1.17.7\conf\nginx.confg

     location / {

          #root   html;   原配置

           root html/dist; #修改后配置

          index  index.html index.htm
;
}

启动后项目效果：

history 模式刷新 404

Vue 单页有 hash 和 history 两种路由。上线常用 history 更美观，但刷新时服务器会按真实路径找文件，找不到就 404。

在 location 里加上 try_files $uri $uri/ /index.html;：

location / {

       root   html/dist;

       index  index.html index.htm;

       try_files $uri $uri/ /index.html; #加上这句即可使用history模式进行路由

}

二、部署到子路径

若应用在 https://www.my-app.com/my-app/，要把 publicPath 设为 /my-app/。

1）vue.config.js

module.exports = {

    publicPath: '/my-app/', //访问子目录:http://www.my-app.com/myapp

    outputDir: 'dist', // 输出文件目录

    assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)

}

开发环境方便测试时，生产才加子路径，并把输出目录改成 my-app：

module.exports = {

     publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/',

     outputDir: 'my-app', // 输出文件目录

     assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)

}

2）router 的 base

history 模式下还要改路由 base，默认可用 process.env.BASE_URL：

const router = new VueRouter({

      mode: 'history', //使用history模式

       base: '/my-app/',//默认路径process.env.BASE_URL,
  routes

})

3）Nginx

location / {

      root   html;

      index  index.html index.htm;

      try_files $uri $uri/ /index.html; #加上这句即可使用history模式进行路由

}

三、CentOS 部署 Node.js 项目

下面按原文用 Node v6.9.5 二进制包 + forever 做后台常驻。

1）下载安装包

wget https://nodejs.org/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/node
ln -s /root/node-v6.9.5-linux-x64/bin/npm /usr/local/bin/npm

4）查看版本

node -v
npm -v

5）全局安装 forever

npm install forever -g

6）进入项目目录启动

forever start ./bin/www

7）查看运行中的项目

forever list

8）停止服务

参数是 forever list 里看到的 pid：

forever stop 12528

四、publicPath 相对路径的限制

网上不少教程写在 Vue 2 上，照抄时要小心。更完整的选项见官方 vue.config.js 文档。publicPath 也可以设成空字符串或 ./，资源会变成相对路径，包可以放到任意目录，也适合 Cordova 一类文件系统。

publicPath这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径，也可以用在类似 Cordova hybrid 应用的文件系统中。


相对 publicPath 的限制
相对路径的 publicPath 有一些使用上的限制。在以下情况下，应当避免使用相对 publicPath:
当使用基于 HTML5 history.pushState 的路由时；
当使用 pages 选项构建多页面应用时。

一句话总结：根路径几乎不用改 publicPath；子路径要同时改 publicPath 和 router.base；history 刷新 404 靠 Nginx try_files 回 index.html。