配置 vue.config.js & index.html

配置两个文件：

1. vue.config.js 配置 cdn & zip
2. public/index.html 配置

– stylelint 可配置样式格式输出

1. vue.config.js 配置（可直接复制）

出处：https://c.lanmit.com/Webqianduan/JavaScript/55401.html

注意事项：

• 用 jsdelivr 代替 bootcdn
• 安装 cnpm install compression-webpack-plugin --save-dev

const path = require('path')
const resolve = (dir) => path.resolve(__dirname, dir);
// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development'
console.log('isProductionisProduction', process.env.NODE_ENV)
// gzip压缩
const CompressionWebpackPlugin = require('compression-webpack-plugin')


const Proxy =  {
  '/api': {
    // 代理地址
    target: 'http://172.16.8.44:8086',
    changeOrigin: true, // 是否跨域
    secure: false,
    pathRewrite: {
      '^/api': '/api/ctrl', //测试环境
      // '/api': '', //需要rewrite重写的, //本地联调
    }
  }
}

const cdn = {
  // 忽略打包的第三方库
  externals: {
    vue: 'Vue',
    vuex: 'Vuex',
    'vue-router': 'VueRouter',
    axios: 'axios',
    'element-ui': 'ELEMENT',
  },

  // 通过cdn方式使用
  js: [
    'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
    'https://cdn.jsdelivr.net/npm/vue-router@3.2.0/dist/vue-router.min.js',
    'https://cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js',
    'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
    'https://cdn.jsdelivr.net/npm/moment@2.26.0/moment.min.js',
    'https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js'
  ],
  css: [
    'https://cdn.jsdelivr.net/npm/element-ui@2.9.2/lib/theme-chalk/index.css'
  ]
}

module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  lintOnSave: false,
  runtimeCompiler: false,     //是否使用包含运行时编译器的 Vue 构建版本
  productionSourceMap: false, //生产环境是否生成 sourceMap 文件
  integrity: false,           //生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)
  // webpack相关配置
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('common', resolve('src/common'))
      .set('assets', resolve('src/assets'))
      .set('router', 'src/router')
      .set('store', 'src/store')
      .set('components', resolve('src/components'))
      .set('views', resolve('src/views'))
      .set('i18n', resolve('src/i18n'))
      .set('config', resolve('src/config'))

    // 移除 prefetch 插件
    config.plugins.delete('prefetch-index');
    // 移除 preload 插件，避免加载多余的资源
    config.plugins.delete('preload-index');
    // 配置cdn引入
    config.plugin('html').tap((args) => {
      args[0].cdn = cdn;
      return args
    })
  },
  configureWebpack: config => {
    // 忽略打包配置
    config.externals = cdn.externals
    if (isProduction) {
      // 生产环境
      //gzip压缩
      const productionGzipExtensions = ['html', 'js', 'css']
      config.plugins.push(
        new CompressionWebpackPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          // eslint-disable-next-line no-useless-escape
          test: new RegExp('\.(' + productionGzipExtensions.join('|') + ')$'),
          threshold: 10240, // 只有大小大于该值的资源会被处理 10240
          minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
          deleteOriginalAssets: false, // 删除原文件
        })
      )
      // 公共代码抽离
      config.optimization = {
        // 分割代码块 chunk
        splitChunks: {
          cacheGroups: {
            //公用模块抽离
            common: {
              chunks: 'initial',
              minSize: 0, //大于0个字节
              minChunks: 2, //抽离公共代码时，这个代码块最小被引用的次数
            },
            //第三方库抽离
            vendor: {
              priority: 1, //权重
              test: /node_modules/,
              chunks: 'initial',
              minSize: 0, //大于0个字节
              minChunks: 2, //在分割之前，这个代码块最小应该被引用的次数
            },
          }
        }
      }
    } 
    else {
      // 开发环境
      // config.mode = 'development';
    }
  },
  devServer: {
    overlay: {
      warnings: false,
      errors: false,
    },
    open: true,
    host: '0.0.0.0',
    port: 8701,
    https: false,
    hotOnly: true,
    proxy: Proxy
  },
  css: {
    extract: true,
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      sass: {
        prependData: `@import "@/common/style/_variable.scss";`
      }
    },
  },
  // 第三方插件配置 
  pluginOptions: {}
}

2. 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,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta http-equiv="x-dns-prefetch-control" content="on"/>
    <link rel="dns-prefetch" href="//cdn.jsdelivr.net">

    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title></title>

    <script src="libs/flexible.js"></script>

    <% for (var i in
    htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
    <% } %>
  </head>
  <body>
    <noscript>
      <strong>很抱歉，没有启用JavaScript, 本服务无法正常工作！</strong>
    </noscript>
    <div id="app"></div>
    <% for (var i in
    htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>
  </body>
</html>

— end