在VueJS中如何为a标签的href属性动态配置多环境base url

方案1：基于 Vue CLI 创建的项目 #

1. 配置环境变量

• 在项目根目录新增 .env.development（测试环境配置文件），写入内容：

VUE_APP_BASE_URL = 'https://test.sample.site'

• 在项目根目录新增 .env.production（线上环境配置文件），写入内容：

VUE_APP_BASE_URL = '你的线上环境正式域名'

注意：Vue CLI 规定客户端可读取的环境变量必须以 VUE_APP_ 为前缀，否则不会被注入到客户端代码中。

2. 组件内动态绑定 href 属性
   将原来硬编码的 a 标签改为动态绑定，用模板字符串拼接参数，同时对 url 进行转义避免特殊字符出错：

<a 
  :href="`http://twitter.com/share?text=Verbatim&url=${encodeURIComponent(process.env.VUE_APP_BASE_URL)}&hashtags=hashtag1,hashtag2,hashtag3`"
  target="_blank"
>
  分享到Twitter
</a>

后续启动测试环境、打包生产环境时会自动加载对应环境的配置，无需手动修改代码。

方案2：基于 Vite 创建的项目 #

如果是用 Vite 搭建的 Vue 项目，配置逻辑类似，仅环境变量的前缀和读取方式有区别：

1. 配置环境变量

• .env.development 写入：

VITE_BASE_URL = 'https://test.sample.site'

• .env.production 写入：

VITE_BASE_URL = '你的线上环境正式域名'

2. 组件内使用写法：

<a 
  :href="`http://twitter.com/share?text=Verbatim&url=${encodeURIComponent(import.meta.env.VITE_BASE_URL)}&hashtags=hashtag1,hashtag2,hashtag3`"
  target="_blank"
>
  分享到Twitter
</a>

内容的提问来源于stack exchange，提问作者Veenavi Anutthara