@vue/cli4.x版本的vue.config.js常用配置方式

目录

• @vue/cli4.x的vue.config.js常用配置
• vue-cli4.*配置vue.config.js文件配置内容不生效
• 解决

@vue/cli4.x的vue.config.js常用配置

设置访问端口号、访问IP地址、跨域代理，路径别名

const path = require('path')
const CompressionPlugin = require('compression-webpack-plugin') // compression-webpack-plugin插件需要npm安装
function resolve(dir) {
    return path.join(__dirname, dir)
}
module.exports = {
  // // 关闭eslint校验, 项目开发中建议开启。这个只是在特殊情况下方便测试时关闭
  // devServer: {
  //   overlay: {
  //     warining: true,
  //     errors: true,
  //   },
  // },
  // lintOnSave: false,
  // 配置部署应用包时的基本 URL（如果有需要，发现放到服务器上静态资源路径请求不对的情况可以看着修改）
  // publicPath: process.env.NODE_ENV === 'production'
  //   ? '/winne-test/'
  //   : '/'
  lintOnSave: 'error', // 设置eslint报错时停止代码编译
  productionSourceMap: false, // 不需要生产环境的 source map（减小dist文件大小，加速构建）
  devServer: {
    open: true,  // npm run serve后自动打开页面
    host: '0.0.0.0',  // 匹配本机IP地址(默认是0.0.0.0)
    port: 8989, // 开发服务器运行端口号
    proxy: {
      '/api': {
         target: 'http://www.exaple.com', // 代理接口地址
         secure: false,  // 如果是https接口，需要配置这个参数
         changeOrigin: true, // 是否跨域
         pathRewrite: {
           '^/api': ''   //需要rewrite的, 这里理解成以'/api'开头的接口地址，把/api代替target中的地址
        }
      }
    }
  },
  chainWebpack: (config) => {
    // 移除 prefetch 插件(针对生产环境首屏请求数进行优化)
    config.plugins.delete('prefetch')
    // 移除 preload 插件(针对生产环境首屏请求数进行优化)   preload 插件的用途：https://cli.vuejs.org/zh/guide/html-and-static-assets.html#preload
    config.plugins.delete('preload')
    // 第1个参数：别名，第2个参数：路径  （设置路径别名）
    config.resolve.alias
    .set('@pages', resolve('./src/page'))
    .set('@router', resolve('./src/router'))
    .set('@store', resolve('./src/store'))
    .set('@utils', resolve('./src/utils'))
  },
  // 配置打包 js、css文件为.gz格式，优化加载速度  （参考：https://blog.csdn.net/qq_31677507/article/details/102742196）
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [new CompressionPlugin({
          test: /\.js$|\.css/, // 匹配文件
          threshold: 10240, // 超过10kB的数据进行压缩
          deleteOriginalAssets: false // 是否删除原文件 （原文件也建议发布到服务器以支持不兼容gzip的浏览器）
        })],
        performance: { // 生产环境构建代码文件超出以下配置大小会在命令行中显示警告
          hints: 'warning',
          // 入口起点的最大体积 整数类型（以字节为单位,默认值是：250000 (bytes)）
          maxEntrypointSize: 5000000,
          // 生成文件的最大体积 整数类型（以字节为单位,默认值是：250000 (bytes)）
          maxAssetSize: 3000000
          // // 只给出 js 文件的性能提示
          // assetFilter: function (assetFilename) {
          //   return assetFilename.endsWith('.js')
          // }
        }
      }
    }
  }
}

vue-cli4.*配置vue.config.js文件配置内容不生效

使用vue-cli时系统会自动帮我们做好一些通用的配置，当我们需要自己再单独定义一些配置时，只需在项目根目录下创建vue.config.js，然后在这个文件里面添加配置即可。

但是在项目中发现更改vue.config.js的内容后并没有起到任何效果

解决

每次更新完vue.config.js停掉热部署（npm run serve),然后再重新开启服务。

目录结构：

vue.config.js配置示例：

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。