vue.config.js常用配置项

常用配置项

module.exports = {
  // 是否保存时使用eslint-loader进行检查  ——默认值true
  lintOnSave: true,
  // 部署应用包时的基本url,
  publicPath: process.env.NODE_ENV === 'production' ? '' : '/',
  // 传递第三方插件选项
  pluginOptions: {

  },

  /* 
    打包相关配置
  */
  
  // 打包后所在目录 ——默认值dist
  outputDir: 'dist',
  // 打包后主页面存放的路径 ——默认值index.html
  indexPath: 'index.html',
  // 打包后是否生成.map,文件
  productionSourceMap: true,
  // 放置静态资源
  assetsDir: 'assets',
  // 文件命名
  filenameHashing: true,
  // 需要通过Babel显示转译某依赖,默认忽略node_modules中所有文件
  transpileDependencies: [

  ],

  /* 
    css相关配置
  */
  css:{
    // 是否将组件中的css提取至一个独立的css文件中;  生产true，开发false
    extract:process.env.NODE_ENV === 'production',
    // true可能影响构建性能
    sourceMap:false,
    // 启用css
    requireModuleExtensions:true,
    // 向css相关的loader传递选项
    loaderOptions:{
      css:{},
      less:{},
      sass:{}
    }
  },

  //对内部的webpack配置
  chainWebpack: () => {

  },

  /* 
    所有webpack-dev-server的选项
  */
  devServer: {
    // 端口号，被占用会自动加1
    port: 8080,
    // 主机名/ip地址
    host: 'localhost',
    // 配置前缀
    https: false,
    // 是否自动启动浏览器;  默认false
    open: false,
    // 热更新
    hotOnly: false,

    // 配置反向代理，解决跨域的问题
    proxy: {
      // 拦截以api开头的url接口
      "/api": {
        // 目标接口域名
        target: 'https://www.baidu.com',
        // 是否跨域
        changeOrigin: true,
        // https接口，需要配置该参数
        secure: false,
        //终端显示重写信息和跨域信息
        logLevel: 'debug',
        // 标识替换
        pathRewrite: {
          '^/api':'/'
        }
      }
    }
    /* 
      http://localhost:8080/api/xx 相当于 https://www.baidu.com/xx
      请求时直接使用 /api/xxx 即可
    */
  }
}

配置反向代理——简介版

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: 'https://www.baidu.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api':'/'
        }
      }
    }
  }
}