前端CDN的使用问题

Question

如题，之前没接触过使用，只是听过CDN，现在项目已经开发完成vue3+ant-design-vue开发的项目，要如何使用CDN，前端代码需要更改吗？

Answer 1

• 可以不改，直接将你的静态资源文件部署到服务器
• 提取第三方资源，直接外部引入，并配置 webpack 的 externals 属性

Answer 2

在html中加入 externals中配置的相关资源路径就好了

 <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>

配置文件

   module.exports = {
 
  publicPath: ".",
 
  // 如果你不需要使用eslint，把lintOnSave设为false即可
  lintOnSave: false,
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
      .set('_c', resolve('src/components'))
      .set('vue$', "vue/dist/vue.esm.js")
    // 压缩图片
    config.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({ bypassOnDebug: true })
      .end()
 
    // 发布模式 
     config.when(process.env.NODE_ENV === 'production', config => {
  
      // 通过externals加载外部CDN资源---- 注意 同时要在index.html中引用相关的静态资源
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        iview: 'iview',
        'animate.css': 'animate.css',
        'v-viewer': 'Viewer',
 
      })
    })
  },
  // 设为false打包时不生成.map文件
  productionSourceMap: false,
  // 如果你使用的是 Vue CLI 3，请设置并更新 vue.config.js 内的 devtool 属性：
  configureWebpack: {
    devtool: 'source-map',
    plugins:[
      new webpack.ProvidePlugin({_:"lodash","windows._":"lodash"}),
 
      // 开启gzip 需要nginx开启gzip支持
      new CompressionWebpackPlugin({
        // filename: '[path].gz[query]',   // 提示compression-webpack-plugin@3.0.0的话asset改为filename
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      }),
 
    ],
 
  },
  outputDir: path.resolve(__dirname, '../carview'),
  // 这里写你调用接口的基础路径，来解决跨域，如果设置了代理，那你本地开发环境的axios的baseUrl要写为 '' ，即空字符串
  devServer: {
// .....
  }
}