关于vue.js:vue3tsvite-问题汇总环境变量三

环境变量配置

第一步:装置cross-env

yarn add cross-env -D

第二步：在根目录新建 .env 、 .env.test 和 .env.prod，并写入对应代码

# 我的项目本地运行端口号VITE_PORT = 8848# 开发环境读取配置文件门路VITE_PUBLIC_PATH = /# 开发环境代理VITE_PROXY_DOMAIN = /api# 开发环境路由历史模式（Hash 模式：`hash`、HTML5 模式：`h5`、Hash 模式带base参数："hash,base参数"、HTML5 模式带base参数："h5,base参数"）VITE_ROUTER_HISTORY = "hash"# 开发环境后端地址VITE_PROXY_DOMAIN_REAL = "http://127.0.0.1:3000"

第三步：配置 package.json 的运行脚本

//第一种在这里写环境 "scripts": {    + "dev": "cross-env --max_old_space_size=4096 vite --mode dev",    + "build": "cross-env vue-tsc --noEmit && vite build --mode dev",     ....   }//执行命令npm run dev

第二种：也能够间接在命令行批改
npm run dev --mode production

第四步：组件中应用

import.meta.VITE_PORT

第五步：vite.config.ts中应用

import { defineConfig, loadEnv, UserConfig } from 'vite';...export default defineConfig(({ mode }: UserConfig): UserConfig => {  const env = loadEnv(mode, __dirname);  return {    server: {      host: '127.0.0.1', //解决"vite use `--host` to expose"      port: Number(env.VITE_PORT),      ...