vue项目配置多个代理

茶颜悅色

已于 2024-02-05 16:51:14 修改

阅读量1.2k

点赞数 5

分类专栏： Vue 项目配置/优化文章标签： vue.js 前端 javascript

于 2023-12-04 18:09:01 首次发布

本文链接：https://blog.csdn.net/m0_69838795/article/details/134790549

版权

Vue 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

项目配置/优化

5 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在Vue项目中通过`.env`文件配置本地、测试、预发和正式环境路径，并在`vue.config.js`中设置outputDir、publicPath，以及使用路径别名和开发服务器代理功能。

摘要由CSDN通过智能技术生成

在本地.env文件配置本地/测试/预发/正式路径：

在vue.config.js 里面配置：

module.exports = defineConfig({
  transpileDependencies: false,
  lintOnSave: false,
  outputDir: process.env.VUE_APP_DIST,
  publicPath: '/',
  css: {
    loaderOptions: {
      postcss: {
        // postcssOptions: {
        //   plugins: [autoprefixer(), postcss]
        // }
      }
    }
  },
  // 配置路径别名
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('./src'))
      .set('components', resolve('./src/components'))
      .set('assets', resolve('./src/assets'))
  },
  // 代理
  devServer: {
    proxy: {
      "/iot": {
        target: process.env.VUE_APP_API_PATH_ONE,
        changeOrigin: true,
        pathRewrite: {
          '^/poi': '',
        }
      },
      "/V1": {
        target: process.env.VUE_APP_API_PATH_TWO,
        changeOrigin: true,
        pathRewrite: {
          '^/V5': '',
        }
      },
      "/api": {
        target: process.env.VUE_APP_API_PATH,
        changeOrigin: true,
        pathRewrite: {
          '^/api': '',
        }
      },
    },
  }
})