Vue.config.js

1.配置多页应用

参考链接：https://cli.vuejs.org/zh/config/
配置pages实现多页应用

pages.png

我们使用node提供的glob来读取多页应用的文件然后生成配置文件方便后续添加更多页面不用手动写配置：

const glob = require("glob");
const path = require("path");

//@ts-ignore
const getPagesEntry = entry => {
  const entryFiles = glob.sync(entry, { matchBase: true });

  const entries = {};
  //@ts-ignore
  entryFiles.forEach(item => {
    const pathName = item.split("/")[item.split("/").length - 2];
    Object.assign(entries, {
      [pathName]: {
        //@ts-ignore
        template: path.join(__dirname, `../pages/${pathName}/index.html`),
        //@ts-ignore
        entry: path.join(__dirname, `../pages/${pathName}/main.ts`),
        filename: `${pathName}.html`,
        title: pathName,
        chunks: ["chunk-vendors", "chunk-common", pathName],
        inject: true,
        minify: {
          html5: true,
          collapseWhitespace: true,
          preserveLineBreaks: false,
          minifyCSS: true,
          minifyJS: true,
          removeComments: false
        }
      }
    });
  });
  console.log("entries---------------", entries);
  return entries;
};

2.配置第三方依赖不参与打包减小vendor包体积

这里我们遇到了一个问题：就是直接在html中引入js文件打包之后build文件夹下没有我们下载到本地的第三方依赖js文件；这里我们使用 copy-webpack-plugin将我们下载的依赖js文件复制到我们的包文件夹下。

2.1.copy-webpack-plugin

npm i copy-webpack-plugin -D

const copyWebpackPlugin = require('copy-webpack-plugin');

configureWebpack:{
  plugins:[
    new CopyWebpackPlugin({
       from :'./static',
       to:'static'
    })
  ]
}

2.2.externals

html文件：
<script src="static/vue.min.js"></script>

configureWebpack:{
   externals:{
    'vue':"Vue"
   }
}

这样我们就实现了第三方依赖不打包