vuecli3配置文件vue.config.js中配置解析

vue-cli3的配置，可以说是all in vue.config.js的,所有配置全部放在了vue.config.js这一个文件中，最下面是一些常用到的配置实例。

当然，封装、就一定会留个口给用户，去对底层进行自定义操作。

vue.config.js的配置项中，有两个口，configureWebpack和chainWebpack。

如何查看vue cli项目的webpack默认配置：

方法：控制台

vue inspect > output.js 

项目根目录中多的一个 output.js 就是默认配置，具体项可以根据这个去做些改动。

vue-cli3的常见配置解析：

//vue.config.json
const path = require(path);
// const vConsolePlugin = require(vconsole-webpack-plugin); // 引入 移动端模拟开发者工具 插件 （另：https://github.com/liriliri/eruda）
// const CompressionPlugin = require(compression-webpack-plugin); //Gzip
// const BundleAnalyzerPlugin = require(webpack-bundle-analyzer).BundleAnalyzerPlugin; //Webpack包文件分析器
const publicPath = process.env.NODE_ENV === "production" ? "/static/" : "/"; //font scss资源路径 不同环境切换控制

const webpack = require(webpack);
// vue.config.js
module.exports = {
  //基本路径
  publicPath: ./,
  //输出文件目录
  outputDir: dist,
  //是否在保存的时候检查
  lintOnSave: true,
  //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  assetsDir: static,
  //以多页模式构建应用程序。
    pages: undefined,
  //是否使用包含运行时编译器的 Vue 构建版本
    runtimeCompiler: false,
  //生产环境是否生成 sourceMap 文件，一般情况不建议打开
  productionSourceMap: false,
  //是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建，在适当的时候开启几个子进程去并发的执行压缩
  parallel: require(os).cpus().length > 1,
  // webpack配置
    //对内部的 webpack 配置进行更细粒度的修改 https://github.com/neutrinojs/webpack-chain see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    chainWebpack: config => {
        /**
         * 删除懒加载模块的prefetch，降低带宽压力
         * https://cli.vuejs.org/zh/guide/html-and-static-assets.html#prefetch
         * 而且预渲染时生成的prefetch标签是modern版本的，低版本浏览器是不需要的
         */
        //config.plugins.delete(prefetch);
        //if(process.env.NODE_ENV === production) { // 为生产环境修改配置...process.env.NODE_ENV !== development
        //} else {// 为开发环境修改配置...
        //}
  },
  //调整 webpack 配置 https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F
    configureWebpack: config => {
        //生产and测试环境
        let pluginsPro = [
            // new CompressionPlugin({ //文件开启Gzip，也可以通过服务端(如：nginx)(https://github.com/webpack-contrib/compression-webpack-plugin)
            //     filename: [path].gz[query],
            //     algorithm: gzip,
            //     test: new RegExp(\.( + [js, css].join(|) + )$, ),
            //     threshold: 8192,
            //     minRatio: 0.8,
            // }),
            //    Webpack包文件分析器(https://github.com/webpack-contrib/webpack-bundle-analyzer)
            // new BundleAnalyzerPlugin(),
        ];
        //开发环境
        let pluginsDev = [
            //移动端模拟开发者工具(https://github.com/diamont1001/vconsole-webpack-plugin  https://github.com/Tencent/vConsole)
            // new vConsolePlugin({
            //     filter: [], // 需要过滤的入口文件
            //     enable: true // 发布代码前记得改回 false
      // }),
      new webpack.ProvidePlugin({//引入jquery
        $:"jquery",
        jQuery:"jquery",
        "windows.jQuery":"jquery"
      })
        ];
        if(process.env.NODE_ENV === production) { // 为生产环境修改配置...process.env.NODE_ENV !== development
            config.plugins = [...config.plugins, ...pluginsPro];
        } else {
            // 为开发环境修改配置...
            config.plugins = [...config.plugins, ...pluginsDev];
        }
  },
  css: {
        // 启用 CSS modules
        modules: false,
        // 是否使用css分离插件
        extract: true,
        // 开启 CSS source maps，一般不建议开启
        sourceMap: false,
        // // css预设器配置项
        // loaderOptions: {
        //     sass: {
        //         //设置css中引用文件的路径，引入通用使用的scss文件（如包含的@mixin）
        //         data: `
        //         $baseUrl: "/";
        //         @import @/assets/scss/_common.scss;
        //         `
    //                             //data: `
    //                             //$baseUrl: "/";
    //                             //`
        //     }
        // }
    },
  // 选项...
  devServer: {
    // host: localhost,
        // host: "0.0.0.0",
        // https: false, // https:{type:Boolean}
        // open: true, //配置自动启动浏览器  http://172.16.1.12:7071/rest/mcdPhoneBar/ 
        // hotOnly: true, // 热更新
    port: 8089,
    // proxy:{
    //   /: {
    //     target: http://192.168.0.125:3000/,
    //     changeOrigin: true,
    //     pathRewrite: {}
    //   },
      // "/rest/*": {
      //   target: "http://172.16.1.12:7071",
      //   changeOrigin: true,
      //   // ws: true,//websocket支持
      //   secure: false
      // },
      // "/pbsevice/*": {
      //   target: "http://172.16.1.12:2018",
      //   changeOrigin: true,
      //   //ws: true,//websocket支持
      //   secure: false
      // },
    // }

    // 第三方插件配置 https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader
    // pluginOptions: {
    //     style-resources-loader: {//https://github.com/yenshih/style-resources-loader
    //         preProcessor: scss,//声明类型
    //         patterns: [
  //                               //path.resolve(__dirname, ./src/assets/scss/_common.scss), 
    //         ],
  //                       //injector: append
    //     }
    // }

  },

  // configureWebpack: {//引入jquery
  //   plugins: [
  //     new webpack.ProvidePlugin({
  //       $:"jquery",
  //       jQuery:"jquery",
  //       "windows.jQuery":"jquery"
  //     })
  //   ]
  // },

}