解決 vue-cli3 多入口打包 BASE_URL is not defined

修改 vue.config.js 文件即可。主要修改方式為使用 configureWebpack 來修改 webpack 的配置，在 config.plugins 中增加 HtmlWebpackPlugin 。

注意，如果使用的模板里面包含全局變量 BASE_URL 的話，需要使用 templateParameters 注入變量的值，否則會報錯 BASE_URL is not defined 。

網上的大多數方式都是去修改模板 BASE_URL 為 htmlWebpackPlugin.options.url ，卻幾乎沒有提及 HtmlWebpackPlugin 的 templateParameters 參數。

• 修改前

module.exports = {
  //路徑前綴
  publicPath: "/",
  lintOnSave: true,
  productionSourceMap: false,
  chainWebpack: (config) => {
    //忽略的打包文件
    config.externals({
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'vuex': 'Vuex',
      'axios': 'axios',
      'element-ui': 'ELEMENT',
    });
    const entry = config.entry('app');
    entry.add('babel-polyfill').end();
    entry.add('classlist-polyfill').end();
    entry.add('@/mock').end();
  },
};

• 修改后

const HtmlWebpackPlugin = require('html-webpack-plugin') // 安裝並引用插件

module.exports = {
  //路徑前綴
  publicPath: "/",
  lintOnSave: true,
  productionSourceMap: false,
  configureWebpack: config => {
    config.plugins = [
      new HtmlWebpackPlugin({
        templateParameters: {
          BASE_URL: `/`
        },
        entry: 'src/main.js',
        template: 'public/index.html',
        filename: 'index2.html',
      }),
      ...config.plugins,
    ]
    console.log(`輸出最終應用的 config`, JSON.stringify(config, null, 2))
  },
  chainWebpack: (config) => {
    //忽略的打包文件
    config.externals({
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'vuex': 'Vuex',
      'axios': 'axios',
      'element-ui': 'ELEMENT',
    });
    const entry = config.entry('app');
    entry.add('babel-polyfill').end();
    entry.add('classlist-polyfill').end();
    entry.add('@/mock').end();
  },
};