带你玩转vue——简单高效的vue.config.js配置

更新时间：2021-12-20 03:16:21

通用的vue.config.js配置

module.exports = {
  publicPath: './',
  devServer: {
    port: 7004,
    disableHostCheck: true
  },
  assetsDir:'static',
  indexPath:"index.html",
  //
  lintOnSave: false,
  runtimeCompiler: true,
  productionSourceMap: false,
  css:{
    extract:true,
    sourceMap: false
    },
    //npm install --save-dev compression-webpack-plugin
    configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
        '@i': path.resolve(__dirname, './src/assets'),
      }
    },
    plugins: [
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      // 下面是下载的插件的配置
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      }),
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 5,
        minChunkSize: 100
      })
    ]
  }
  }

publicPath: ‘./’：改配置生效后，打包后的包可放在服务器下任何文件夹内！

devServer.port: 7004：开发环境下的运行端口，此端口非确定，如被占用会自动加1，在生产环境下无效

assetsDir：是否将静态资源整合，并声明整合所在的文件夹

indexPath：index.html的输出路径，默认为index.html

lintOnSave：保存的时候使用 eslint-loader 进行检查。有效的值：ture | false | "error" 当设置为 "error" 时，检查出的错误会触发编译失败。

css.extract：是否将页面中的css摘取出来生成一个css文件

configureWebpack：

npm install --save-dev compression-webpack-plugin 使用该命令安装compression-webpack-plugin插件并进行如上配置，webpack打包时会将js文件压缩为.gz文件，减少首屏加载时间，注意同时需要修改nginx配置文件nginx.conf：

#gzip on;

gzip on;

gzip_min_length 1k;

gzip_comp_level 9;

gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

gzip_vary on;

gzip_disable “MSIE [1-6].”;

上一篇 : ：使用注释AOP实现接口访问次数限制下一篇 : NB物联网之天翼物联（6）——移动电信NB的区别与兼容开发

带你玩转vue——简单高效的vue.config.js配置

相关阅读

推荐文章