vue-cli3中的vue.config.js配置

i_am_a_div_日积月累_

已于 2022-10-25 18:11:04 修改

阅读量600

点赞数

分类专栏： vue 文章标签： vue.js node.js javascript

于 2020-08-28 18:01:48 首次发布

本文链接：https://blog.csdn.net/i_am_a_div/article/details/108284133

版权

vue 专栏收录该内容

109 篇文章 5 订阅

订阅专栏

vue-cli3中的vue.config.js配置

我的跨域是配置通过chrome浏览器的跨域设置，前端修改跨域问题，以此解决跨域的，
故如果需要配置代理，就看proxy部分；

const path = require('path')
const resolve = (dir) => path.join(__dirname, dir)
module.exports = {
  publicPath: './', // 打包路径，使用相对路径生成的dist文件夹下的index可以打开
  outputDir: 'dist', // 输出文件目录
  productionSourceMap: false, // 取消生成map文件
  lintOnSave: false, // 配置关闭eslint  (代码会有红色热浪提示错 但不影响代码运行)
  // webpack-dev-server 相关配置
  devServer: {
    open: true, // 自动打开浏览器
    host: '0.0.0.0',
    /* 设置为0.0.0.0则所有的地址均能访问 */
    port: 8080, // 端口号
    https: false, // 是否使用https协议
    hotOnly: false, // 是否开启热更新
    // proxy: null // 设置代理
    disableHostCheck: true, // 开启可以用自己的域名

    //【【【【【【【【【【【【【【【【【【【【【注意修改和配置代理后，一定要重启项目 否则无效或404】】】】】】】】】】】】】】】】】
    //【【【【【【【【【【【【【【【【【【【【【注意修改和配置代理后，一定要重启项目 否则无效或404】】】】】】】】】】】】】】】】】
    proxy: { //【【【【【【【【【【【【【【【 注意修改和配置代理后，一定要重启项目 否则无效或404】】】】】】】】】】】】】】】】】
      // 配置多个代理
      '/chc-shop': {
        target: 'https://www.zhbbroker.cn', //这里的是.cn还是.com 只会影响你本地启动项目时候会调用哪个数据库的数据，而不会影响测试和线上环境调用对应的接口的。（一般都是本地调用.cn；等本地需要调试线上bug时候，改成.com重启项目看线上bug）
        changeOrigin: true, //是否跨域
        secure: false, //如果是https请求 需要设置为true
        logLevel: 'debug',
        //ws: true,//是否要代理 websocket
      },
      '/myapi': {
        target: 'https://www.zhbbroker.cn', //接口域名
        changeOrigin: true, //是否跨域
        secure: false, //如果是https请求 需要设置为true
        logLevel: 'debug',
        //ws: true,//是否要代理 websocket
        pathRewrite: { // 路径重写--意思就是遇到路径有 /myapi 的，就重写成 / 了。具体是重新写成 / 还是 /myapi看你自己的路径。
          '^/myapi': '/' //（如果你的路径没有公共部分 那代理就这么写 vue页面请求的地址前需要自己拼接上 /myapi/后端接口 ）
          // '^/myapi': '/myapi'    //（好比你的很多路径都是有公共部分 例如 /myapi/xx/xxx类型的，那代理就需要这么写或者直接不写pathRewrite这部分）
        }
      },

    },
  },
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('common', resolve('src/common'))
      .set('utils', resolve('src/utils'))
  }
}