广西备案工信部网站wordpress 超过20M

广西备案工信部网站,wordpress 超过20M,长沙必去十大网红地方,做一个在线支付网站Vue2 和 Vue3 配置环境变量的核心差异在于脚手架工具#xff1a;Vue2 仅基于 vue/cli#xff08;Vue CLI#xff09;#xff0c;Vue3 则分为 vue/cli 版和 Vite 版#xff08;Vite 是 Vue3 官方推荐的新一代脚手架#xff09;。以下是分场景的详细配置方法#xff0c;包…Vue2 和 Vue3 配置环境变量的核心差异在于脚手架工具Vue2 仅基于vue/cliVue CLIVue3 则分为vue/cli版和Vite版Vite 是 Vue3 官方推荐的新一代脚手架。以下是分场景的详细配置方法包含文件规范、配置规则、使用方式和自定义环境。一、Vue2基于 Vue CLIVue2 脚手架由vue/cli构建环境变量遵循 Vue CLI 官方规范核心是「文件命名前缀限制」。1. 环境文件命名规范必须放在项目根目录文件名称生效环境说明.env所有环境通用优先级最低.env.development开发环境默认npm run serve时生效.env.production生产环境默认npm run build时生效.env.test测试环境需手动配置自定义环境需配启动脚本.env.local本地私有环境通用会被 git 忽略优先级高.env.development.local本地开发私有环境覆盖.env.development2. 配置规则环境变量必须以VUE_APP_为前缀Vue CLI 强制要求非前缀变量不会被打包支持简单的键值对不支持嵌套对象注释用#开头。示例创建 .env.development开发环境# 开发环境接口地址 VUE_APP_BASE_URL http://localhost:3000/api # 开发环境标识 VUE_APP_ENV development # 功能开关 VUE_APP_DEBUG true示例创建 .env.production生产环境# 生产环境接口地址 VUE_APP_BASE_URL https://api.xxx.com # 生产环境标识 VUE_APP_ENV production # 功能开关 VUE_APP_DEBUG false3. 环境变量的使用方式1在 Vue 组件/JS 文件中使用// 组件中exportdefault{mounted(){console.log(process.env.VUE_APP_BASE_URL);// 输出对应环境的接口地址console.log(process.env.VUE_APP_DEBUG);// 注意值是字符串需手动转布尔如 JSON.parse}}2在 vue.config.js 中使用Vue CLI 配置文件中可直接通过process.env读取// vue.config.jsmodule.exports{devServer:{proxy:{/api:{target:process.env.VUE_APP_BASE_URL,// 读取环境变量changeOrigin:true,pathRewrite:{^/api:}}}}}4. 自定义环境如测试环境步骤1创建.env.test文件VUE_APP_BASE_URL https://test-api.xxx.com VUE_APP_ENV test步骤2修改package.json的启动脚本{scripts:{serve:vue-cli-service serve,// 默认开发环境serve:test:vue-cli-service serve --mode test,// 测试环境build:vue-cli-service build,// 默认生产环境build:test:vue-cli-service build --mode test// 打包测试环境}}步骤3启动/打包测试环境npmrun serve:test# 启动测试环境npmrun build:test# 打包测试环境二、Vue3分 2 种脚手架Vue3 支持两种脚手架vue/cli和 Vue2 兼容、Vite官方推荐新一代工具两者环境变量配置差异较大。场景1Vue3 Vue CLI和 Vue2 几乎一致环境文件命名、前缀VUE_APP_、使用方式process.env完全和 Vue2 一致唯一差异Vue3 组件中可在script setup中直接使用process.envscript setup console.log(process.env.VUE_APP_BASE_URL); /script场景2Vue3 Vite重点Vite 是 Vue3 推荐的脚手架环境变量规则和 Vue CLI 不同核心是「前缀VITE_import.meta.env读取」。1. 环境文件命名规范项目根目录文件名称生效环境说明.env所有环境通用优先级最低.env.development开发环境默认npm run dev.env.production生产环境默认npm run build.env.test测试环境需手动配置.env.local本地私有环境会被 git 忽略2. 配置规则变量必须以VITE_为前缀Vite 强制要求可通过envPrefix自定义支持多行字符串、注释#开头无需安装额外依赖Vite 内置环境变量解析。示例.env.development# 开发环境接口地址 VITE_BASE_URL http://localhost:3000/api # 开发环境名称 VITE_APP_ENV development # 多行字符串示例 VITE_APP_DESC 这是多行描述 适用于长文本配置示例.env.productionVITE_BASE_URL https://api.xxx.com VITE_APP_ENV production3. 环境变量的使用方式1在 Vue 组件/JS 文件中使用Vite 不支持process.env浏览器环境无process对象需用import.meta.env!-- script setup 语法 -- script setup // 直接读取 console.log(import.meta.env.VITE_BASE_URL); // 布尔值转换Vite 环境变量值均为字符串 const isDebug import.meta.env.VITE_APP_DEBUG true; /script !-- 选项式 API -- script export default { mounted() { console.log(import.meta.env.VITE_BASE_URL); } } /script2在 vite.config.js 中使用Vite 配置文件中需通过loadEnv手动加载环境变量因为配置文件运行在 Node 环境无法直接用import.meta.env// vite.config.jsimport{defineConfig,loadEnv}fromvite;importvuefromvitejs/plugin-vue;exportdefaultdefineConfig(({mode}){// 加载环境变量参数1环境模式参数2项目根目录参数3前缀默认VITE_constenvloadEnv(mode,process.cwd(),VITE_);return{plugins:[vue()],server:{proxy:{/api:{target:env.VITE_BASE_URL,// 使用加载的环境变量changeOrigin:true,rewrite:(path)path.replace(/^\/api/,)}}}}});4. 自定义环境如测试环境步骤1创建.env.test文件VITE_BASE_URL https://test-api.xxx.com VITE_APP_ENV test步骤2修改package.json脚本{scripts:{dev:vite,// 默认开发环境dev:test:vite --mode test,// 测试环境开发build:vite build,// 默认生产环境打包build:test:vite build --mode test// 测试环境打包}}步骤3启动/打包npmrun dev:test# 启动测试环境npmrun build:test# 打包测试环境5. 自定义环境变量前缀可选若不想用VITE_前缀可在vite.config.js中配置envPrefixexportdefaultdefineConfig({envPrefix:MY_APP_,// 自定义前缀为 MY_APP_})此时环境变量需命名为MY_APP_BASE_URL读取时用import.meta.env.MY_APP_BASE_URL。三、通用注意事项Vue2/Vue3 均适用变量类型所有环境变量的值最终都是字符串布尔值/数字需手动转换如JSON.parse(import.meta.env.VITE_DEBUG)优先级本地私有文件.env.xxx.local 特定环境文件.env.development 通用文件.env敏感信息前端环境变量会被打包到代码中不要存放密钥、token 等敏感信息敏感信息需通过后端接口转发重启服务修改环境文件后需重启脚手架服务npm run serve/dev才能生效git 忽略.local后缀的文件会被默认加入.gitignore适合存放本地调试的配置如.env.development.local。总结场景前缀读取方式核心配置文件Vue2 Vue CLIVUE_APP_process.env.xxx.env/.env.developmentVue3 Vue CLIVUE_APP_process.env.xxx同上Vue3 ViteVITE_默认import.meta.env.xxx同上