vue-cli3 history 模式、多页面入口、分别打包及 Nginx 上线部署

最近开始开发新项目，用到了 vue-cli3 的多页面，同时搞通了在线部署，以下是配置文件详细。

vue-cli3 多页面入口、分别打包及 Nginx 上线部署

vue.config.js 配置

const DEBUG = process.env.NODE_ENV !== "production";

const PAGES = {
  page_1: {
    entry: "src/pages/page_1/main.js",
    template: "public/page_1.html",
    filename: "page_1.html",
    chunks: ["chunk-vendors", "chunk-common", "page_1"]
  },
  page_2: {
    entry: "src/pages/page_2/main.js",
    template: "public/page_2.html",
    filename: "page_2.html",
    chunks: ["chunk-vendors", "chunk-common", "page_2"]
  }
};

// 服务器多级目录下部署 vuejs 打包文件的目录地址
let _publicPath = "/";

let page = {};
let pageName = process.argv[3]; // 获取build后面的参数确定执行哪个文件

if (DEBUG) {
  page = PAGES; //判断开发环境不用分包处理
} else {
  //假如命令 npm run build-index,就会得到 pageName = index
  page[pageName] = PAGES[pageName];

  // 假设打包后放在 二级目录
  _publicPath = _publicPath + pageName; // 例：/page_1
}

module.exports = {
  publicPath: _publicPath,
  outputDir: "app/" + pageName,
  pages: page,
  …… // 暂略
};

router.js（page_1） 配置

import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);

const DEBUG = process.env.NODE_ENV !== "production";

// 不同页面模块的 PAGE_NAME 名称对应各自的模块名称
const PAGE_NAME = "page_1";

let basePath = "/";

if (!DEBUG) {
  basePath = basePath + PAGE_NAME; // 例：/page_1
}

export default new Router({
  mode: "history",
  base: basePath,
  routes: [
    {
      path: "",
      name: "",
      component: () => import("")
    },

public/page_1.html（page_1） 配置

// 增加 meta 标签，结尾需要 / ，此标签不影响开发环境

服务器端 nginx.conf 配置

location /page_1 {
    try_files $uri $uri/ /page_1/page_1.html;
}

package.json 配置

// 增加以下内容
"scripts": {
    "build-page_1": "vue-cli-service build page_1",
    "build-page_2": "vue-cli-service build page_2"
}
  
终端使用：npm run build-page_1、npm run build-page_2，分别打包不同模块

浏览器访问

localhost/page_1/page_1.html

如果使用了 vue-router 配置了路由，浏览器访问时，在路由地址前加上 page_1。