first commit

历届学生/front-end-team/项目练习/上课项目/vuecli3-tmp/vue.config.js

@@ -0,0 +1,139 @@
+const { defineConfig } = require('@vue/cli-service')
+const path = require('path');
+const CompressionPlugin = require('compression-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+
+let cdn = {
+  css: [
+    'https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css'
+  ],
+  js: [
+    'https://cdn.bootcss.com/vue/2.6.10/vue.runtime.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-beta.1/axios.min.js',
+    'https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js'
+  ]
+}
+
+module.exports = defineConfig({
+  transpileDependencies: true,
+  publicPath: './',
+  productionSourceMap: false,
+  devServer: {
+
+    hot: false,
+    compress: true,
+    open: false,
+    client: {
+      overlay: {
+        errors: true,
+        warnings: false,
+      },
+    },
+    // proxy: {
+    //   '/api': {
+    //     target: 'http://115.159.153.142:9010/h5',
+    //     changeOrigin: true,
+    //     ws: true,
+    //     pathRewrite: {
+    //       '^/api': ''
+    //     }
+    //   }
+    // }
+  },
+  chainWebpack: config => {
+    if (process.env.NODE_ENV === 'production') {
+      // 生产环境下注入一个变量cdn 变量可以在html中通过htmlWebpackPlugin.options进行获取
+      config.plugin('html')
+          .tap(args => {
+            args[0].cdn = cdn;
+            return args;
+          })
+    }
+
+    // 移除 prefetch 插件
+    config.plugins.delete('prefetch')
+    config.plugins.delete('preload')
+
+
+    // 配置别名
+    config.resolve.alias
+        //第一个参数：别名 第二个参数：路径
+        .set('@',resolve('src'))
+        .set('@less',resolve('src/assets/less'))
+        .set('@page',resolve('src/assets/less/page'))
+
+
+    // 配置 less 的自动导入
+    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
+    types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
+
+
+  },
+  configureWebpack: config => {
+    // 正式阶段，项目打包上线的优化措施
+    if (process.env.NODE_ENV === 'production') {
+
+      /**
+       * 去除这些公共包，让webpack不打包到项目源码的js中，减小项目js体积
+       * 然后使用 pages 节点下的 cdn 数组里面的资源外链来引入。
+       */
+      config.externals = {
+        vue: 'Vue',
+        'vue-router': 'VueRouter',
+        axios: 'axios',
+        Vant: 'Vant'
+      };
+
+
+      /**
+       * 部署阶段 代码压缩
+       */
+      config.plugins.push(
+          // 生产环境自动删除console
+          new UglifyJsPlugin({
+            uglifyOptions: {
+              warnings: false,
+              compress: {
+                drop_debugger: true,
+                drop_console: true
+              }
+            },
+            sourceMap: false,
+            parallel: true
+          })
+      );
+
+
+      /**
+       * Gzip压缩
+       */
+      return {
+        plugins: [new CompressionPlugin({
+          test: /\.js$|\.html$|\.css/, //匹配文件名
+          threshold: 10240, //对超过10k的数据进行压缩
+          deleteOriginalAssets: false //是否删除原文件
+        })]
+      }
+
+
+    }
+  }
+})
+
+
+function resolve(dir) {
+  return path.join(__dirname,dir)
+}
+
+
+function addStyleResource (rule) {
+  rule.use('style-resource')
+      .loader('style-resources-loader')
+      .options({
+        patterns: [
+          path.resolve(__dirname, './src/assets/less/_.less'),
+        ],
+      })
+}