Vue cli3的配置（生产注入CDN,cssjs按版本号打包,postcss设置rem基准值,）

//需要以cdn方式在打包的时候引入的地址
const cdn = {
  css: [],
  js: [
    'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
    'https://cdn.bootcss.com/vue-router/3.1.2/vue-router.min.js',
    'https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js',
    'https://cdn.bootcss.com/axios/0.19.0/axios.min.js',
    'https://cdn.bootcss.com/echarts/4.3.0-rc.2/echarts-en.min.js'
  ]
}
const isProduction = process.env.NODE_ENV === 'production'
const Timestamp = new Date().getTime() //当前时间为了防止打包缓存不刷新，所以给每个js文件都加一个时间戳
const Version= process.env.VUE_APP_Version//当前版本号
module.exports = {
  //   outputDir: `${srcFile}`, // 在npm run build时 生成文件的目录 type:string, default:'dist'
  productionSourceMap: false, // 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度
  lintOnSave: false,//不允许eslint语法检查,可以禁止掉
  publicPath: './',
  css: {
    //注意,配置后将会自动将class里的css的px全部转为rem,style样式不转
    //使用需要下载转换包npm i postcss-pxtorem
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 50, // 根字体大小,换算的基数
            selectorBlackList: [], 
            propList: ['*']
          })
        ]
      }
    },
    // 是否使用css分离插件 ExtractTextPlugin
    //css 添加版本号
    extract: {
      //一种方式，打包后的css 会带版本号，不改变文件名的。
      filename: 'css/[name].css?v=' + Version,
      chunkFilename: 'css/[name].css?v=' + Version,
    }
  },
  configureWebpack: {
    // webpack 配置
    output: {
      // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
      filename: `js/[name].${Version}.${Timestamp}.js`,
      chunkFilename: `js/[name].${Version}.${Timestamp}.js`
    },
    // 用cdn方式引入
    externals: {
      vue: 'Vue',
      'vue-router': 'VueRouter',
      vuex: 'Vuex',
      echarts: 'echarts',
      axios: 'axios'
    }
  },
  chainWebpack: config => {
    /* 添加分析工具 */
    if (isProduction) {
      // 不要预先渲染
      // config.plugins.delete("prefetch");
      // config.plugins.delete("preload");
      // 压缩代码
      config.optimization.minimize(true)
      // 分割代码
      config.optimization.splitChunks({
        chunks: 'all'
      })
    }
    // 生产环境注入cdn
    config.plugin('html').tap(args => {
      args[0].cdn = cdn
      return args
    })
  }
}

cdn的html模板文件需要重改

我自己的模板

  
  
  
  
  
  
  <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
  
  
  <% } %>
  < 如果没有css需要注入，则不要上面的css cdn 会引起样式错误>
  
  <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
  
  <% } %>
  



  
  
  <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
  
  <% } %>
  
  

开发环境内资源还是引用的本地的，生产的时候，就变成CDN链接了