Vue线上使用cdn加速

最新推荐文章于 2023-11-08 12:01:53 发布

LLL_LH

最新推荐文章于 2023-11-08 12:01:53 发布

阅读量908

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/LLL_liuhui/article/details/107879785

版权

Vue 专栏收录该内容

57 篇文章 1 订阅

订阅专栏

1、public/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title><%= htmlWebpackPlugin.options.title %></title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
  <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
 
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
      Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>

2、vue.config.js


const CompressionWebpackPlugin = require('compression-webpack-plugin');
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const UglifyJsPlugin = require('terser-webpack-plugin');
const productionGzipExtensions = ['js', 'css'];
const isProduction = process.env.NODE_ENV === 'production';
const path = require('path');

function resolve (dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  publicPath: './',
  productionSourceMap: false,
  lintOnSave: false,
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('img', resolve('src/assets/images'))
      .set('css', resolve('src/assets/styles'))
      .set('icon', resolve('src/assets/icon'))
  },

  configureWebpack: config => {
    // 生产模式
    config.externals = {
      "AMap": "AMap"
    }
    if (isProduction) {
      config.externals = {
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'vuex': 'Vuex',
        'axios': 'axios',
        "AMap": "AMap"
      }
      // 打包生产.gz包
      config.plugins.push(new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      }))
      // 添加自定义代码压缩配置
      config.plugins.push(
        new UglifyJsPlugin({
          terserOptions: {  //  uglifyOptions
            compress: {
              drop_debugger: true,
              drop_console: true,
            },
          },
          sourceMap: false,
          parallel: true,
        })
      )
    }
  },

  // devServer: {
  //   proxy: {
  //     '/api': {
  //       target: 'https://xxx.com.cn',
  //       ws: true,
  //       changeOrigin: true,
  //       pathRewrite: {
  //         '^/api': ''
  //       }
  //     }
  //   }
  // }
}

注意，这个只是线上使用，开发时用的是本地的代码，所以本地开发时，需要把index.html里使用cdn的链接注释掉。

LLL_LH

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue线上使用cdn加速

1、public/index.html<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> &l
复制链接

扫一扫