快捷導(dǎo)航

VITE+VUE3跨域環(huán)境變量配置全過程

更新時(shí)間：2026年01月08日 09:02:19 作者：落魄前端，在線炒粉

文章介紹了如何在Vue項(xiàng)目中使用Vite管理環(huán)境變量,并根據(jù)不同的環(huán)境（開發(fā)、生產(chǎn)）設(shè)置相應(yīng)的變量,它還指導(dǎo)如何在Vue文件和vite.config.ts中獲取這些環(huán)境變量,并在生產(chǎn)環(huán)境中處理跨域問題

一、在項(xiàng)目根目錄下新建以下三個(gè)文件

1) .env (全局默認(rèn)配置環(huán)境)

2) .env.development (開發(fā)環(huán)境，對(duì)應(yīng)npm run dev)

3) .env.production (生產(chǎn)環(huán)境，對(duì)應(yīng)npm run build)

二、分別在.env.development,.env.production 寫入環(huán)境變量

1) .env.development

// .env.production

VITE_APP_TITLE = "線上版本"
VITE_BASE_URL = "https://xxx.xxx.xxx(根據(jù)項(xiàng)目實(shí)際情況配置)"

2) .env.development

// .env.development

VITE_APP_TITLE = "開發(fā)版本"
VITE_BASE_URL = "https://xxx.xxx.xxx(根據(jù)項(xiàng)目實(shí)際情況配置)"

根據(jù)項(xiàng)目實(shí)際情況，加入所需要的變量，變量命名以VITE_為開頭

在vue文件中獲取環(huán)境變量的方法

// .vue文件獲取環(huán)境變量

console.log(import.meta.env)
console.log(import.meta.env.VITE_APP_TITLE)
console.log(import.meta.env.VITE_BASE_URL)

在vite.config.ts中獲取環(huán)境變量的方法

import { defineConfig, loadEnv } from 'vite'

import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import';

// 如果編輯器提示 path 模塊找不到，則可以安裝一下 @types/node -> npm i @types/node -D
import { resolve } from 'path'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, __dirname)
  console.log(env.VITE_APP_TITLE, env.VITE_BASE_URL)
  return {
    plugins: [vue(),styleImport({
      libs: [
        {
          libraryName: 'vant',
          esModule: true,
          resolveStyle: (name) => `vant/es/${name}/style`,
        },
      ],
    }),],
    resolve: {
      alias: {
        '@': resolve(__dirname, 'src') // 設(shè)置 `@` 指向 `src` 目錄
      }
    },
    base: './', // 設(shè)置打包路徑
    server: {
      port: 4000, // 設(shè)置服務(wù)啟動(dòng)端口號(hào)
      open: true, // 設(shè)置服務(wù)啟動(dòng)時(shí)是否自動(dòng)打開瀏覽器
      cors: true, // 允許跨域
  
      // 設(shè)置代理，根據(jù)我們項(xiàng)目實(shí)際情況配置
      proxy: {
        '/api': {
          target: env.VITE_BASE_URL, // 環(huán)境變量
          changeOrigin: true,
          secure: false,
          rewrite: (path) => path.replace('/api/', '')
        }
      }
    }
  }
})

三、線上環(huán)境(npm run build以后)跨域問題處理

在axios中，判斷當(dāng)前環(huán)境后再請(qǐng)求前配置好baseUrl

import axios from 'axios'

var http = axios.create({
  timeout: 1000 * 20,
  baseURL: import.meta.env.DEV? '': import.meta.env.VITE_BASE_URL
})

// 請(qǐng)求響應(yīng)器
http.interceptors.request.use(
  (config) => {
    return config
  },
  function (error) {
    // 返回錯(cuò)誤信息
    return Promise.reject(error)
  }
)

http.interceptors.response.use(
  (response) => {
    return response
  },
  (error) => {
    return Promise.reject(error.response)
  }
)

export default http