vue.config.js常规配置

官网

// vue.config.js
const path =  require('path')
const CompressionWebpackPlugin = require('compression-webpack-plugin') // 开启gzip压缩， 按需引用

const IS_PROD = process.env.NODE_ENV === 'production' //判断是否生产环境
const resolve = (dir) => path.join(__dirname, dir)
module.exports = {
  publicPath: IS_PROD ? './' : '/',  // 公共路径（根据自己项目调整）
  outputDir: 'dist', // 打包生产环境构建所输出的文件的目录
  assetsDir: 'assets', // 放置生成的静态资源(js、css、img、fonts)目录，从生成的资源覆写 filename 或 chunkFilename 时，assetsDir 会被忽略。
  indexPath: 'index.html' , // 相对于打包路径index.html的路径
  filenameHashing: true, //文件名哈希
  lintOnSave: true, // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
  runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。
  productionSourceMap: false, // 生产环境的 source map: 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。 
  parallel: require('os').cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
  chainWebpack: config => {
    config.resolve.symlinks(true) // 修复热更新失效

    // 项目文件路径别名
    config.resolve.alias 
      .set('@', resolve('src'))
      .set('@assets', resolve('src/assets'))
      .set('@components', resolve('src/components'))
      .set('@views', resolve('src/views'))
      .set('@utils', resolve('src/utils'))
      .set('@api', resolve('src/api'))
      .set('@store', resolve('src/store'))
    
    if (IS_PROD) {
      // 开启 gzip 压缩 - 需要 npm i compression-webpack-plugin --save-dev
      config.plugin('compressionPlugin').use(
        new CompressionWebpackPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i,
          threshold: 10240, // 对超过10k的数据压缩
          minRatio: 0.8,
        })
      )

      // 正式环境下，删除console和debugger
      config.optimization
        .minimize(true)
        .minimizer('terser')
        .tap(args => {
          const { terserOptions } = args[0]
          terserOptions.compress.drop_console = true
          terserOptions.compress.drop_debugger = true
          return args
        })
    }
    // 配置 webpack 识别 markdown 为普通的文件
    config.module
      .rule('markdown')
      .test(/\.md$/)
      .use()
      .loader('file-loader')
      .end()    
  },
  
  css: {
    extract: IS_PROD,
    requireModuleExtension: true, // 开启 CSS modules 给所有css文件，如果为false，element-ui样式失效
    loaderOptions: {
      postcss: {
        plugins: [
          // 兼容浏览器，添加前缀
          require('autoprefixer')({
            overrideBrowserslist: [
              'Android 4.1',
              'iOS 7.1',
              'Chrome > 31',
              'ff > 31',
              'ie >= 8',
            ],
            grid: true,
          }),
          // postcss-pxtorem（针对移动端） 插件配置
          require('postcss-pxtorem')({
            rootValue: 37.5, // 75表示750设计稿，37.5表示375设计稿
            unit_precision: 5,//保留小数位
            exclude: /src\/views\/pc|\/node_modules\/element-ui/i, // 排除pc端和element组件的转换
            propList: ['*']
          })
        ]
      }
    }
  },
  devServer: {
    overlay: { // 让浏览器 overlay 同时显示警告和错误
      warnings: true,
      errors: true
    },
    host: '0.0.0.0',
    port: 8088, // 端口号
    https: false, // https:{type:Boolean}
    open: true, //配置自动启动浏览器
    hotOnly: true, // 热更新
    proxy: { //配置代理
      '/dev-api': {
        target: 'http://192.168.11.11:7040/', //代理指向后端ip
        changeOrigin: true,
        ws: false,//websocket支持
        secure: false,
        pathRewrite: {
          '^/dev-api': '/'
        }
      },
    }
  }
}