vue3 vite模式配置测试，开发、生产环境以及代理配置

1、首先在根目录下创建三个文本文件：.env.development，.env.production，.env.test

.env.development中的内容为：

// 开发环境 .env.development
NODE_ENV = 'development'
VITE_APP_MODE  = 'development'
VITE_OUTPUTDIR  = dist_dev // 打出包的名称
VITE_APP_BASE_URL  = http://www.development.com/

.env.production中的内容为：

// 生产环境 .env.production
NODE_ENV = 'production'
VITE_APP_MODE  = 'production'
VITE_OUTPUTDIR  = dist_pro // 打出包的名称
VITE_APP_BASE_URL  = http://www.production.com/

.env.test中的内容为：

// 测试环境 .env.test
NODE_ENV = 'test'
VITE_APP_MODE = 'test'
VITE_OUTPUTDIR = dist_test
VITE_APP_BASE_URL = http://www.test.com/

2、package.json中的script中的内容配置如下：

  "scripts": {
    "dev": "vite",
    "prod": "vite --mode production",
    "test": "vite --mode test",
    "build": "vite build",
    "preview": "vite preview",
    "build:dev": "vite build --mode development",
    "build:prod": "vite build --mode production",
    "build:test": "vite build --mode test"
  },

3、使用：在main.js中打印查看结果：

console.log('import.meta.env.BASE_URL',import.meta.env.BASE_URL)  // 输出的为：/
console.log('import.meta.env.NODE_ENV',import.meta.env.NODE_ENV)  // 输出的为：/
console.log('import.meta.env.VITE_APP_MODE',import.meta.env.VITE_APP_MODE)  // 输出的为：/
console.log('import.meta.env.VITE_OUTPUTDIR',import.meta.env.VITE_OUTPUTDIR)  // 输出的为：/
console.log('import.meta.env.VITE_APP_BASE_URL',import.meta.env.VITE_APP_BASE_URL)  // 输出的为：/

4、验证：分别运行 npm run dev， npm run test、 npm run prod

• npm run dev：输出结果如下：
  
• npm run test：输出结果如下：
  
• npm run prod：输出结果如下：
  

5、可以看出以上结果会根据运行命令的不同而使用不同的配置这样就可以在生产和测试接口路径不一样时不用根据不同的命令来访问不同的接口地址，访问配置如下：

5.1、首先需要下载axios

5.2、创建如下文件及文件夹

5.3、http.js中的内容如下：

// axios基础的封装
import axios from 'axios'
const httpInstance = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_URL,
  timeout: 5000
})

// axios请求拦截器
httpInstance.interceptors.request.use(config => {
  // 1. 从pinia获取token数据
  return config
}, e => Promise.reject(e))

// axios响应式拦截器
httpInstance.interceptors.response.use(res => res.data, e => {
  // 统一错误提示
  return Promise.reject(e)
})

export default httpInstance

5.4、在app.vue中发送请求并

import request from '@/utils/http'
request({
  url: `/api/member/order`
})

6、分别运行并测试

6.1 npm run test

6.2 npm run prod

strict-origin-when-cross-origin 出现这个需要找后端解决跨域

6.3 npm run dev

7 另一种通过代理方式：

首先需要将这三个文件中的这个东西注释掉

然后修改 vite.config.js 其中的内容如下：

import { fileURLToPath, URL } from 'node:url'

import {defineConfig, loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {

  const env = loadEnv(mode, './');  // 注意：loadEnv来自vite
  
  // console.log("env.VITE_APP_BASE_URL", env.VITE_APP_BASE_URL);
  return{
    plugins: [
      vue(),
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    // 主要修改在这
    server: {  
    proxy: {
      "/api": {
        target: env.VITE_APP_BASE_URL,
        // target: "",
        //其他配置...
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  }
  }
})

在app.vue中发送请求

添加完代理后的三种方式的执行结果都是一样的

npm run dev

原文地址：https://blog.csdn.net/jjw_zyfx/article/details/142545948

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！