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

解决 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();
  },
};