Vue学习-import {...} from “xxxx“与import ... from “xxx“ 的使用

本文探讨了在Vue项目中使用import导入不同暴露方式的模块时的区别:使用{}
Vue3 + Vite 项目的 `index.html` 中使用环境变量,可按以下步骤操作: ### 1. 定义环境变量 在项目根目录下创建 `.env.development` `.env.production` 文件,用于分别存储开发生产环境的变量。变量名必须以 `VITE_` 开头,否则在其他页面无法访问这些变量[^1][^2][^3]。 例如,在 `.env.development` 文件中定义: ```plaintext VITE_MAP_SERVER = http://xxx.xxx.xxx.xxx:xxxx/_AMapService ``` 在 `.env.production` 文件中定义: ```plaintext VITE_MAP_SERVER = https://prod.xxx.xxx/_AMapService ``` ### 2. 在 `index.html` 中使用环境变量 在 `index.html` 中,可以通过 JavaScript 代码访问这些环境变量。由于 `index.html` 是静态文件,不能直接使用 `import.meta.env`,但可以通过内联脚本实现。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> const mapServer = '%VITE_MAP_SERVER%'; console.log('Map Server:', mapServer); </script> </head> <body> <div id="app"></div> <script type="module" src="/src/main.js"></script> </body> </html> ``` ### 3. 配置 Vite 以替换环境变量 在 `vite.config.js` 或 `vite.config.ts` 中配置 `define` 选项,让 Vite 在构建时替换这些占位符。 ```javascript import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig(({ mode }) => { const env = {}; for (const key in import.meta.env) { if (key.startsWith('VITE_')) { env[`%${key}%`] = import.meta.env[key]; } } return { plugins: [vue()], define: env }; }); ``` 这样,在开发生产环境中,`index.html` 里的 `%VITE_MAP_SERVER%` 会被替换为相应环境变量的值。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值