Vue多页面应用与Nginx

npm run build 之后将dist放到Nginx目录就行?

再多几个需求就不简单了:

支持VueRouter History模式
多页面入口
部署在子目录, 如 www.example.com/app/

提示: 此文档基于的环境是: vue-cli 3.0 与 vue 2.6.

一步一步来

将多个页面部署在域名根目录

假如我们项目有两个入口: pc 与 mobile, 我们需要修改这几个地方:

vue.config.js: 配置多页面
router.js: 配置base
nginx.conf: 配置支持RouterHistory模式

vue.config.js

按照vue-cli的官方文档配置多入口并不难:

module.exports = {
  pages: {
    'index': {
      entry: 'src/pages/pc/index.js',
      template: 'src/pages/pc/index.html',
      filename: 'index.html',
    },
    'mobile': {
      entry: 'src/pages/mobile/index.js',
      template: 'src/pages/mobile/mobile.html',
      filename: 'mobile/index.html',
    }
  },

页面入口名字即mobile只会影响在开发环境的入口: 现在需要使用 'localhost:3000/index' 和或者 'localhost:3000' 来进入index页面, 使用 'localhost:3000/mobile' 来进入 mobile 页面.

filename会影响在生产环境中打包出来的入口文件(.html文件)路径. 值得注意的是 mobile.filename 字段: 我设置的是 mobile/index.html, 而不是 mobile.html, 这是有原因的, 在下面配置nginx时会说到.

router.js

配置好vue.config.js之后打开 'localhost:3000/mobile' 却发现空白, 进入不了mobile的路由.

查文档 VueRouterApi-base, 发现需要配置 base.

base: 应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"。

官方文档只是举了一个例子说部署在/app/下可以设置base, 但多页面也需要如此配置.

如下:

mobile.router.js

export default new Router({
  mode: 'history',
  base: '/mobile/',
  routes: [
    {
      path: '/',
      name: 'index',
      component: Home
    },
  ]
})

现在访问 localhost:3000/mobile 就能正常进入.

至此, 开发环境没问题了. 接下来是部署.

nginx.conf

我使用nginx作为web容器部署前端项目, 其他服务器大同小异.

我们需要将npm run build打包出来的dist文件夹下的所有文件放置到nginx所在服务器的/usr/share/nginx/html目录下. (目录可以自定义)

nginx.conf

server {
    listen       80;
    server_name  localhost;

    root   /usr/share/nginx/html;

    location / {
        # vue router mode 为 history 时美化url
        try_files $uri $uri/ /index.html;
    }
}

其中为了支持VueRouter的History模式, 我们需要按照官方文档配置: HTML5 History 模式.

又得益于我们将mobile入口的输出文件地址修改为了 mobile/index.html, 正好访问 /mobile/ 时让Nginx打开mobile/index.html文件, 所以它足够简单.

如果你只有需求将项目部署在根目录, 那么现在便完成了.

将多个页面部署在子目录

假如需要将项目放入 www.example.com/app/ 下, 访问www.example.com/app/进入index入口, 访问www.example.com/app/mobile进入mobile入口. 则在上述 ‘部署到根目录’ 基础之上还需要修改以下几项文件:

vue.config.js: 配置多页面入口, 打包出来的文件路径.
router.js: 配置base

vue.config.js

module.exports = {
  publicPath: '/app/', // modified
  outputDir: 'dist/app', // modified
  pages: {
    'app/index': { // modified
      entry: 'src/pages/pc/index.js',
      template: 'src/pages/pc/index.html',
      filename: 'index.html',
    },
    'app/mobile': { // modified
      entry: 'src/pages/mobile/index.js',
      template: 'src/pages/mobile/mobile.html',
      filename: 'mobile/index.html',
    }
  }

pages中需要修改的是两个入口名字, 修改为: app/index与 app/mobile.

在上面说了, 页面入口名字即app/mobile只会影响到开发环境访问入口: 现在在开发环境访问localhost/app/mobile才能进入mobile页面.

如果我们需要在生产模式也使用domain/app/mobile路径访问项目, 还需要修改: publicPath和outputDir

publicPath: 指定在html模板中注入的打包出来的静态文件路径, 亦可实现将打包出的静态文件上传到CDN.
outputDir: 打包出的文件地址, 默认是dist, 我们需要修改为dist/app, 表示所有文件都存放在dist/app文件夹下.

更多请查阅文档: publicpath, outputdir.

router.js

修改base, 如下:

mobile.router.js

export default new Router({
  mode: 'history',
  base: '/app/mobile/', // modified
  routes: [
    {
      path: '/',
      name: 'index',
      component: Home
    },
  ]
})

QA

Q: 为什么不用 Nginx 的alias指令来实现子目录, 而是通过修改outputDir参数?

A: 修改outputDir是为了不修改nginx配置. 不修改outputDir也是可行的, 那么需要修改nginx配置如下:

   location /app {
       alias /usr/share/nginx/html;
       ...
   }

少改一个文件是一个, 所以我推荐修改 outputDir .