vue-cli 3.x打包配置 - 多页面（最末）

module.exports = {
  //文件引入路劲
  publicPath: process.env.NODE_ENV === 'development'?"":"../../target",
  //输出目录
  outputDir:'dist/target',
  //hrml输出目录
  indexPath:'../target.html',
}

如果public目录下，有引入一些第三方的资源直接引用的。需在public的html文件中做如下配置<%= BASE_URL %>

<link href="<%= BASE_URL %>target.css" rel="stylesheet" type="text/css">

CDN引入

// vue.config.js

chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // #region 忽略生成环境打包的文件
      var externals = {
        'vue': 'Vue',
        'axios': 'axios',
        'element-ui': 'ELEMENT',
        'vue-router': 'VueRouter',
        'vuex': 'Vuex',
        'echarts': 'echarts'
      }
      config.externals(externals)

      // 在html文件中引入相关CDN
      const cdn = {
        css: [
          // element-ui css
          'https://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css'
        ],
        js: [
          // vue
          'https://cdn.xxxxxx/vue.min.js',
          // vue-router
          'https://cdn.xxxxxx/vue-router.min.js',
          // vuex
          'https://cdn.xxxxxx/vuex.min.js',
          // axios
          'https://cdn.xxxxxx/axios.min.js',
          // element-ui js
          'https://xxxxxx/element-ui/2.13.0/index.js',
          //echarts
          'https://xxxxxx/echarts/4.6.0/echarts-en.common.js'
        ]
      }
      config.plugin('html')
        .tap(args => {
          args[0].cdn = cdn
          return args
        })
    }
  }

  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <% if (process.env.NODE_ENV === 'production') { %>
 
      <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
        <link href="<%=css%>" rel="preload" as="style">
        <link rel="stylesheet" href="<%=css%>" as="style">
      <% } %>
      <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
        <link href="<%=js%>" rel="preload" as="script">
        <script src="<%=js%>"></script>
      <% } %>
 
    <% } %>

然后需要将之前引入的代码注释 main.js中

最近吧 有两个项目需要合并一下 AB两个项目 A项目是个编辑器 所以有很多地方使用 最近业务有所改动 编辑器就仅属于A了 强依赖没得法 合了之后便于调试便于打包
比较懒所以直接就扔到了src目录 问题应该是有的吧 优化空间也是很大的

// vue.config.js
const CopyWebpackPlugin = require("copy-webpack-plugin")
const pageMethod = require('./util/getPages.js')

module.exports = {
  pages: pageMethod.pages(), //  多页面配置
  transpileDependencies: ['element-ui']  // element有ES6语法IE不支持么得法让她再打包一次吧
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
   //  上面的粘过来主要是用于定位
   //  A项目拿过来了  但是呢static的文件没有打包进去  手动处理一下额   免得报错
    plugins: [
      new CopyWebpackPlugin([
        { from: './A/static/img', to: "static/img" }
      ]),
      new CopyWebpackPlugin([
        { from: './A/static/guide.pdf', to: "static" }
      ])
    ]
  },
}

// 随便起的个名字  主要是为了多页面的引用配置 A项目是个多页面
const pageNames = ['A1', 'A2', 'A3']
const pages = {}
module.exports.pages = function () {
  pages['index'] = {
    entry: `src/main.js`,
    template:  `public/index.html`,
    filename: 'index.html',
  }
  pageNames.forEach(key => {
    pages[key] = {
      entry: `A/src/${key}/main.js`,
      template:  `A/src/${key}/index.html`,
      filename: `${key}.html`,
    }
  })
  return pages
}

乍一看没啥大问题 但是呢 还是比较想分包打包吧 那样维护就方便的多 结果现在都弄到根目录了

// 黑色的还是带劲点
// 讲道理 glob 还是很给力的可以读取文件就很方便额  打包之后打包之前都能做一些操作还是挺爽的
// const glob = require('glob')

// 复制目录
glob.sync('./dist/A/*.html').forEach((filepath, name) => {

})