vue3开发中怎么根据不同环境配置后端地址

2024年7月5日 15:23 by wst

vue

---

问题

之前在开发vue2的时候，配置开发环境和线上环境的后端地址已经搞定，方法见这里。

但是现在已经采用vue3开发，项目采用vite构建，那个方法已经不适用了。该怎么办呢？

解决方法

由于采用vite构建项目，所以配置文件vite.config.js起着很重要的作用，配置呢，也在这里实现。具体内容如下：

// vite.config.js
import { loadEnv } from 'vite';

const env = loadEnv(process.env.NODE_ENV, process.cwd(), '');
const apiUrl = env.VITE_API_URL;

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: apiUrl,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});

在此之前需要先创建两个文件：

• .env.development --用于开发环境；
• .env.production--用于生产环境；

env.development内容如下：

VITE_API_URL=http://test.myserver.com

.env.production内容如下：

VITE_API_URL=http://online.myserver.com

提醒：

除了这个还有一个重要的提示，请求的时候路径前面记得加上/api。

比如这个请求，本来是'/rel/platform'，现在要改为：'/api/rel/platform'

export const fetchPlatformData = (query) => {
    return request({
        url: '/api/rel/platform',
        method: 'get',
        params: query
    });
};

总结

多学多练吧，实践出真知！

---