环境变量的设置
最近用Svelte开发了个小应用,在不同的开发环境使用不同的变量,以达到区分 开发环境 与 生产环境。
核心原理是利用 dotenv 模块来加载不同的路径的文件来区分不同的环境变量,用 @rollup/plugin-replace 插件来把代码中的使用 字符串 占位的值来替换 dotenv 加载的变量。
以下代码演示个大概:
//.env.pord
__HOST__ = https://api.example.com
//.env.dev
__HOST__ = http://localhost
// rollup.config.js
const production = !process.env.ROLLUP_WATCH;
export default {
plugins: [
// ... 这里省略一堆插件的配置
!production && config({path: '.env.dev'}) && replace({
__HOST__: process.env.__HOST__
}),
production && config({path: '.env.prod'}) && replace({
__HOST__: process.env.__HOST__
}),
]
}
下面 console.log(HOST)
会根据不同环境来输出不同的值,在 生产环境 输出的是 https://api.example.com
,在 开发环境 输出的则是 http://localhost
// App.svelte
const HOST = '__HOST__'
console.log(HOST)
参考:https://medium.com/dev-cafe/how-to-setup-env-variables-to-your-svelte-js-app-c1579430f032
部署到子目录
修改 public 下的 index.html 文件内容,把引用的资源从 绝对路径 修改为 相对路径