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

news2024/9/29 22:46:53

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/, ''),
	      },
	    },
  	}
  }
})