Vue-cli常用配置

以下所以配置都在vue.config.js文件的module.exports = { } 中

---

基本配置

baseUrl: './', // 默认'/'，部署应用包时的基本 URL
outputDir: 'dist', // 构建文件的目录
assetsDir: '', // 相对于outputDir的静态资源(js、css、img...)的目录
lintOnSave: false,//是否使用eslint
runtimeCompiler: true, // 使用运行时编译器的Vue版本
productionSourceMap: true, // 生成source map
parallel: true,
pwa: {}，
pages:{   
    index: {
    entry for the page
    entry: 'src/index/main.js',
    the source template
    template: 'public/index.html',
    output as dist/index.html
    filename: 'index.html'
 }}

---

跨域配置

  devServer: {
     overlay: {
      warnings: true,
      errors: true
    },
    historyApiFallback: false,
    open: false,
    openPage: "index.html",
    host: '0.0.0.0',
    port: 8000,
    https: false,
    ws: false,
    hotOnly: false,
    proxy: {
     '/api': {
      target: process.env.VUE_APP_BASE_API,
      changeOrigin: true,
      headers: {
        Route: false
      },
     }
    },
    before(app) {
      try {
        cp.fork(path.join(__dirname, "/apiMock/index.js"), {
          cwd: "apiMock"
        });
      } catch (e) {
        console.error(e);
      }
      app.use("/oms/pages/", express.static("static"));
      app.use("/oms/cover/", express.static("static/cover"));
    },
  }

---

添加webpack配置

• const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

  configureWebpack: {
    devtool: "source-map",
    ...
  },
  chainWebpack: config => {
    // Loader配置
    config.module
        .rule('scss')
        .use('sass-loader')
        .tap(options =>
            merge(options, {
            includePaths: [path.resolve(dirname, 'node_modules')],
        })
    );
    // 修复HMR
    config.resolve.symlinks(true);
    // 添加别名
    config.resolve.alias
     .set('@', resolve('src'))
     .set('components', resolve('src/components'));
    // 打包分析
    config.plugin('webpack-report')
      .use(BundleAnalyzerPlugin, [{
       analyzerMode: 'static',
      }]);
    //防止第三方包打包到bundle中
    config.externals = {
     'vue': 'Vue',
     'vue-router': 'VueRouter',
     'vuex': 'Vuex',
     ...
    //去掉日志和debugger语句
    if (needclean) {
      const plugins = [];
      plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              warnings: false,
              drop_console: true,//移除console
              drop_debugger: true,//移除_debugger
              pure_funcs: ['console.log']//移除console
            }
          },
          sourceMap: false,
          parallel: true
        })
      );
      config.plugins = [
        ...config.plugins,
        ...plugins
      ];
    }
  }
    }
  }

---

全局导入sass样式

css: {
 modules: false,
 requireModuleExtension: true, // 将*.module.[ext]视为module
 extract: true,//提取css为单独文件
 extract: { //提取css为单独文件,为css后缀添加hash
    filename: 'css/[name].[hash:8].css',
    chunkFilename: 'css/[name].[hash:8].css'
 }，
 sourceMap: false,
 loaderOptions: {
    sass: {
        // 全局sass样式
        data: @import "~assets/scss/common.scss";
    },
    // px转换为rem
    postcss: {
     plugins: [
      require('postcss-pxtorem')({
        rootValue : 1, // 换算的基数
        selectorBlackList : ['weui', 'el'], // 忽略转换正则匹配项
        propList  : ['*']
        })
      ]
    }
 }
}

---

全局导入sass样式

pluginOptions: {
  // 安装vue-cli-plugin-style-resources-loader插件
  // 添加全局样式global.scss
  "style-resources-loader": {
    preProcessor: "scss",
    patterns: [
     resolve(__dirname, "./src/scss/scss/variables.scss")
    ]
   }
},

---

开启gzip压缩

  configureWebpack: config => {
    if (生产) {
      const plugins = [];
      plugins.push(
        new CompressionWebpackPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: productionGzipExtensions,
          threshold: 10240,
          minRatio: 0.8
        })
      );
      config.plugins = [
        ...config.plugins,
        ...plugins
      ];
    }
  }

---

开启 Zopfli压缩

npm i --save-dev @gfx``/zopfli brotli-webpack-plugin

const CompressionWebpackPlugin = require('compression-webpack-plugin');
const zopfli = require("@gfx/zopfli");
const BrotliPlugin = require("brotli-webpack-plugin");
const productionGzipExtensions = /.(js|css|json|txt|html|ico|svg)(?.*)?$/i;

  configureWebpack: config => {
    if (生产) {
      const plugins = [];
      plugins.push(
        new CompressionWebpackPlugin({
          algorithm(input, compressionOptions, callback) {
           return zopfli.gzip(input, compressionOptions, callback);
          },
          compressionOptions: {
           numiterations: 15
          },
          minRatio: 0.99,
          test: productionGzipExtensions
        })
      );
      plugins.push(
        new BrotliPlugin({
          test: productionGzipExtensions,
          minRatio: 0.99
        })
      );
      config.plugins = [
        ...config.plugins,
        ...plugins
      ];
    }
  }

---

添加IE兼容

1. 安装 @babel/polyfill
   npm i --save @babel/polyfill

2. 在main.js中添加
   import '@babel/polyfill';

3. 配置babel.config.js 文件

   const plugins = [];
   module.exports = {
    ``presets: [[``"@vue/app"``,{``"useBuiltIns"``: ``"entry"``}]],
    ``plugins: plugins
   };