vite 读取命令行变量作为接口请求地址

文章介绍了如何在Vite项目中通过命令行参数动态设置API请求的代理地址。在`npmrunbuild`时,可以通过`--API_PROXY`指定生产环境的URL。同时,项目利用`getApiUrl.js`脚本处理环境变量,根据开发或构建环境写入不同的配置到`src/api/hostIp.js`,确保在开发和打包时能正确调用接口。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vite 读取命令行变量作为接口请求地址

当前版本 “vite”: “^4.1.4”

1. 命令行 实际打包时,改这里的环境变量即可

当然, 感觉最佳实践是在CI/CD中设置环境变量

npm run build --API_PROXY=/url/

2.package.json

"scripts": {
  "predev": "node ./scripts/getApiUrl.js",
  "dev": "vite",
  "prebuild": "node ./scripts/getApiUrl.js",
  "build": "vite build",
},

3.scripts

// scripts/getApiUrl.js

var fs = require('fs');
var path = require('path');
// 写入
var fsWrite = function (content) {
  // 写入到默认值配置文件中
  var pwd = process.cwd();
  var apiConfigPath = path.resolve(pwd, "src/api/hostIp.js");
  fs.writeFileSync(apiConfigPath, content);
}
var apiProxy = process.env.npm_config_api_proxy;
if (apiProxy) {
  var content = `export const hostIp = "${apiProxy}";
export default "${apiProxy}";`;
  fsWrite(content)
} else {
  // 获取到当前的pre命令
  var eventName = process.env.npm_lifecycle_event
  var command = eventName == 'prebuild' ? 'build' : 'dev'
  // 打包必须填写 API_PROXY
  if (command == 'build') {
    throw new Error('❌❌❌:\033[41;30m 请在命令行后添加请求地址,例如: \033[40;31m   npm run build --API_PROXY=/url/ \033[0m')
  } else {
    var content = `const ip = import.meta.env.VITE_IP;
export const hostIp = ip;
export default hostIp;`
    fsWrite(content)
  }
}

4.生成的hostIp文件

npm run dev
// src/api/hostIp.js
// 开发环境
const ip = import.meta.env.VITE_IP; // 从环境变量中获取
export const hostIp = ip;
export default hostIp;
npm run build --API_PROXY=/url/
// src/api/hostIp.js
// 生产(打包)环境
export const hostIp = "/url/";
export default hostIp;

5.请求接口的js文件

// src/api/modules/examine.js
import axios from 'axios'
import { hostIp } from './../hostIp'
axios.post(`${hostIp}getList`, {pageSize:10,pageNum:1})

6.环境变量文件配置

//.env.development
VITE_IP = '/qsh/'

7.完整的项目目录

        
├─scripts
│      getApiUrl.js
│      
└─src
    ├─api
    │  │  .DS_Store
    │  │  hostIp.js
    │  │  
    │  └─modules
    │          examine.js
    │   ............env.development
│  .env.production
│  package.json

### 使用 Vite 进行 Chrome 插件开发 #### 创建项目结构 为了使用 Vite 构建 Chrome 扩展程序,首先需要初始化一个新的 Vite 项目。通过命令行工具安装并设置好基本的项目框架。 ```bash npm create vite@latest my-chrome-extension --template vanilla cd my-chrome-extension npm install ``` 这会创建一个基础的 HTML/CSS/JS 结构适合用于构建扩展应用[^1]。 #### 修改 `vite.config.js` 支持 Manifest 文件 为了让 Vite 正确处理 Chrome 扩展特有的 manifest.json 文件,在项目的根目录下添加此 JSON 文件,并调整 `vite.config.js` 来支持打包过程中读取这些特定资源: ```javascript // vite.config.js import { defineConfig } from 'vite' export default defineConfig({ build: { rollupOptions: { input: './src/main.ts', output: { entryFileNames: '[name].js', chunkFileNames: '[name].js', assetFileNames: '[name].[ext]' } }, emptyOutDir: true, } }) ``` 同时确保 `manifest.json` 中指定了正确的背景脚本和服务工作线程入口点等必要字段。 #### 加载 `.env` 变量至环境中 对于不同环境下的 API 请求路径或其他配置项,可以利用 dotenv 库来管理多个`.env.*`文件。例如,在根目录创建两个不同的环境配置文件——`.env.development` 和 `.env.production`: ```plaintext #.env.development ENV=development VITE_API_URL=http://localhost:3000/api/ ``` ```plaintext #.env.production ENV=production VITE_API_URL=https://api.example.com/prod_api/ ``` 注意这里前缀用了 `VITE_`,这是因为在 Vite 中只有带有该前缀的变量才会被注入到客户端代码里作为全局常量可用. #### 编写前端逻辑与样式 按照常规方式编写 Vue 或 React 组件以及其他静态资产。由于 Vite 对现代 JavaScript 版本有很好的支持,因此可以直接采用 ES Modules 的语法糖以及最新的 CSS 功能特性而无需额外配置转换器或预处理器。 #### 测试和调试插件 完成编码之后可以在本地启动服务器模拟真实场景测试效果;也可以直接把 dist 文件夹里的产物拖拽给浏览器加载临时版本来进行更贴近实际使用的检验过程。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值