回顾前端项目打包时--脚本引入时机与环境类型的判断问题

上线环境

基本来讲，我们前端的项目无非就是基本的三个环境，开发/测试/生产，今天就简单说下打包时引入脚本的时机问题。

为什么不能 "运行时根据网址判断"？

如果想让项目发布后，根据访问的网址（shengchan.com/test.com）动态切换环境（比如自动识别网址并设置 API_URL），需要额外写 "运行时判断逻辑"：

// 在 main.js 或全局工具文件中，根据当前网址动态设置 API
let API_URL;
if (window.location.hostname === 'shengchan.com') {
  API_URL = 'https://prod-api.example.com';
} else if (window.location.hostname === 'test.com') {
  API_URL = 'https://test-api.example.com';
}
window.API_URL = API_URL;

其实这样一看没啥问题，页面在加载后也能够进行不同环境的判断，一点毛病没有，但是还是不推荐。

为啥呢？

因为这种方式有个缺点就是：无法提前在 index.html 中使用（比如动态引入统计脚本），通常不如 "构建时区分环境" 灵活可靠。

以实际项目为例

1. 比如说性能的监控插件之类的

这种插件是要在你初始化之前就已经注入的，不可能在加载后才会去运行记录，比如插件要去监控页面的白屏时间和最大元素的绘制时间等。

2.另外的插件比如是在节点加载之后进行的，像埋点这种

这种类型的插件需要在实例完成后，进行交互的，可以不用在初始化就去运行，但是还是不建议利用地址名称进行判断

3.胳膊拗不过大腿，你非要用地址进行判断,最好是多处业务有用到，只能说这种方式大家易看懂是生产还是测试吧，

因为在main.js中使用window.xxx的方式记录在刷新后丢失，所以还是用local进行存储下环境类型吧，也方便后续的业务用到。

回顾环境的判断

以vue为例，常规的环境判断如下：

1. 创建环境文件在项目根目录创建对应文件，定义环境变量：

   env

   // .env.development
   VITE_BASE_URL = 'http://dev.api.com'  // 开发环境接口地址
   VITE_DEBUG = true                     // 开发环境开启调试模式

   env

   // .env.production
   VITE_BASE_URL = 'http://prod.api.com' // 生产环境接口地址
   VITE_DEBUG = false                    // 生产环境关闭调试模式

2. 在代码中使用 直接通过 import.meta.env 访问变量（不同工具语法略有差异）：

   javascript

   运行

   // 接口地址自动适配环境
   axios.defaults.baseURL = import.meta.env.VITE_BASE_URL;
   
   // 仅在开发环境打印调试信息
   if (import.meta.env.VITE_DEBUG) {
     console.log('当前环境：', import.meta.env.MODE); // 输出 "development" 或 "production"
   }

3. 通过命令指定环境 在 package.json 中定义脚本，通过 --mode 指定环境（自动加载对应 .env 文件）：

   json

   {
     "scripts": {
       "dev": "vite", // 默认开发环境，加载 .env.development
       "build:test": "vite build --mode test", // 测试环境，加载 .env.test
       "build": "vite build" // 默认生产环境，加载 .env.production
     }
   }

三、不同工具的差异

工具	环境变量前缀（必填）	访问方式	备注
Vite	VITE_	import.meta.env.变量名	如 import.meta.env.VITE_BASE_URL
Create React App	REACT_APP_	process.env.变量名	如 process.env.REACT_APP_BASE_URL
Vue CLI	VUE_APP_	process.env.变量名	如 process.env.VUE_APP_BASE_URL

注意：

上面的演示获取环境变量的结果是在常规的js或者.vue文件中进行，如果是在初始化的index.html文件中使用，要按照如下写法去进行，否则你的判断将会不生效。

例如测试环境的配置：

.env.test

VUE_APP_ENV=test

public中index.html获取环境类型需要以如下方式获取：

cosnt env ='<%= env.VUE_APP_ENV %>';