vue webpack 常用配置

107 阅读1分钟
const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  publicPath: '/', // 部署应用包时的基本 URL
  outputDir: 'dist', // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录
  assetsDir: 'assets', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
  filenameHashing: true, // 设置为true,打包出来的文件具有hash,以便更好的控制缓存
  lintOnSave: false, // eslint-loader 是否在保存的时候检查
  configureWebpack: { // 开发生产共同配置,新增一些别名设置
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  },
  devServer: { // 设置代理 // webpack-dev-server 相关配置
    hot: true, // 热加载
    host: 'localhost', // ip地址
    port: 3333, // 端口
    https: false, // false关闭https,true为开启
    open: true, // 自动打开浏览器
    before (app) {
      app.use((req, res, next) => {
        // set cros for all served files
        res.set('Access-Control-Allow-Origin', '*')
        next()
      })
    },
    proxy: {
      '/api': {
        target: 'http://www.baidu.com/abc/', // 后端给的真实的地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  chainWebpack: config => { // 链式操作 目前还不知道这个具体是干嘛的
  }
}