Vue多页面

vue.config.js
官网地址：https://cli.vuejs.org/zh/config/#pages

注意事项

1. pages 内的 entry 是每个单独的 main.js (或自定义名称)，pages 下的每个属性名就是页面的 url
2. 多页之间不能共用 vuex，考虑本地存储（说是每个页面会重新实力化一个 Vue，其中注册的 vuex/router 等会重新初始化）
3. 单个页面使用路由时，在 main.js 内渲染函数注册的 .vue 文件内只能写<router-view />，不然在这里的东西会重复两遍
4. router 的 mode 使用 history 时候，单独页面的总路由不能写 path: '/'，只能写 path: '/login'，不然显示不出来
5. hash 下的 router 使用时候没有上述问题，path: '/'不存在上述问题

module.exports = {
  pages: {
  	index: {
  	  entry: 'path'
  	}
  }
}

---

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

const port = 8888 // dev port

module.exports = {
  publicPath: '/',  //路径
  outputDir: 'dist', 
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  pages: {
    index: {
      entry: 'src/views/index/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      title: '首页',
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    login: {
      // page 的入口
      entry: 'src/views/login/main.js',
      // 模板来源
      template: 'public/login.html',
      // 在 dist/index.html 的输出
      filename: 'login.html',
      title: '首页',
      chunks: ['chunk-vendors', 'chunk-common', 'login']
    },
    vendor: {
      // page 的入口
      entry: 'src/views/vendor/main.js',
      // 模板来源
      template: 'public/vendor.html',
      // 在 dist/index.html 的输出
      filename: 'vendor.html',
      title: '首页',
      chunks: ['chunk-vendors', 'chunk-common', 'vendor']
    },
    merchant: {
      // page 的入口
      entry: 'src/views/merchant/main.js',
      // 模板来源
      template: 'public/merchant.html',
      // 在 dist/index.html 的输出
      filename: 'merchant.html',
      title: '首页',
      chunks: ['chunk-vendors', 'chunk-common', 'merchant']
    },
    design: {
      // page 的入口
      entry: 'src/views/design/main.js',
      // 模板来源
      template: 'public/design.html',
      // 在 dist/index.html 的输出
      filename: 'design.html',
      title: '首页',
      chunks: ['chunk-vendors', 'chunk-common', 'design']
    }
  },
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/api': {
        target: `https://test.yantuyunke.com`,
        secure: false,
        pathRewrite: {
          '/api': 'https://test.yantuyunke.com'
        }
      }
    }
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  },
  chainWebpack(config) {
    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()

    // set preserveWhitespace
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions.preserveWhitespace = true
        return options
      })
      .end()

    config
    // https://webpack.js.org/configuration/devtool/#development
      .when(process.env.NODE_ENV === 'development',
        config => config.devtool('cheap-source-map')
      )

    config
      .when(process.env.NODE_ENV !== 'development',
        config => {
          config
            .plugin('ScriptExtHtmlWebpackPlugin')
            .after('html')
            .use('script-ext-html-webpack-plugin', [{
            // `runtime` must same as runtimeChunk name. default is `runtime`
              inline: /runtime\..*\.js$/
            }])
            .end()
          config
            .optimization.splitChunks({
              chunks: 'all',
              cacheGroups: {
                libs: {
                  name: 'chunk-libs',
                  test: /[\\/]node_modules[\\/]/,
                  priority: 10,
                  chunks: 'initial' // only package third parties that are initially dependent
                },
                commons: {
                  name: 'chunk-commons',
                  test: resolve('src/components'), // can customize your rules
                  minChunks: 3, //  minimum common number
                  priority: 5,
                  reuseExistingChunk: true
                }
              }
            })
          config.optimization.runtimeChunk('single')
        }
      )
  }
}