最近開始開發(fā)新項目，用到了 vue-cli3 的多頁面，同時搞通了在線部署，以下是配置文件詳細(xì)。

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"]
  }
};

// 服務(wù)器多級目錄下部署 vuejs 打包文件的目錄地址
let _publicPath = "/";

let page = {};
let pageName = process.argv[3]; // 獲取build后面的參數(shù)確定執(zhí)行哪個文件

if (DEBUG) {
  page = PAGES; //判斷開發(fā)環(huán)境不用分包處理
} else {
  //假如命令 npm run build-index,就會得到 pageName = index
  page[pageName] = PAGES[pageName];

  // 假設(shè)打包后放在 二級目錄
  _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 名稱對應(yīng)各自的模塊名稱
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 標(biāo)簽，結(jié)尾需要 / ，此標(biāo)簽不影響開發(fā)環(huán)境
<meta base ="/center/">

服務(wù)器端 nginx.conf 配置

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

package.json 配置

// 增加以下內(nèi)容
"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，分別打包不同模塊

瀏覽器訪問

<!-- 文件的地址：/page_1/page_1.html-->
localhost/page_1/page_1.html

如果使用了 vue-router 配置了路由，瀏覽器訪問時，在路由地址前加上 page_1。