vue打包多个域名

针对Vue项目打包多个域名的需求，核心在于根据不同的部署环境（如开发、测试、生产）或不同的目标域名，动态切换API接口地址、路由base、静态资源路径等配置。以下是几种专业且常用的解决方案：

方案一：使用环境变量与模式（推荐）
Vue CLI（或Vite）支持通过.env文件管理不同环境的变量。在项目根目录创建.env.development（开发环境）、.env.production（生产环境）等文件，并在其中定义VUE_APP_API_URL（或VITE_API_URL）等变量，对应不同域名下的API地址。构建时通过--mode参数指定环境，如vue-cli-service build --mode production，打包后的代码会自动读取对应环境变量。对于需要针对多个生产域名的情况，可以为每个域名单独创建一个环境文件，例如.env.domain1、.env.domain2，并在构建命令中指定模式：vue-cli-service build --mode domain1。

方案二：动态配置（运行时加载）
若希望在同一个打包产物中适应多域名，可采用运行时动态配置。在public/index.html中引入一个外部config.js文件，该文件由服务器根据请求域名生成（例如通过Nginx读取域名并注入window.__CONFIG__对象），Vue应用在main.js中读取该对象设置axios baseURL、路由base等。此方案无需多次打包，适合域名数量不确定或频繁变更的场景。

方案三：多入口/多构建配置
在vue.config.js（或vite.config.js）中利用pages选项或webpack multi-compiler，为每个域名创建独立的入口和构建配置。例如，通过definePlugin注入process.env.BASE_URL等变量，然后分别打包出dist-domain1、dist-domain2等目录。这种方式适合各个域名下页面结构、路由配置差异较大的项目。

方案四：Nginx反向代理与重写
如果Vue项目本身不关心域名，只是API地址不同，可以在Nginx层通过proxy_pass根据Host或server_name将请求转发到不同的后端服务器。同时，利用sub_filter或SSI (Server Side Include)在返回HTML时动态替换window.__API_URL__等占位符。这样前端可以保持一套代码，无需区分域名。

方案五：构建脚本自动化
在package.json中编写多个scripts，例如："build:domain1": "vue-cli-service build --mode domain1"、"build:domain2": "vue-cli-service build --mode domain2"。配合CI/CD流水线，根据分支名称或环境变量自动选择对应的模式构建。此方案适合需要频繁为不同域名生成独立部署包的场景。

最佳实践建议
1. 若域名数量少且固定，优先使用环境变量+多模式，清晰且易于维护。
2. 若域名数量多或动态变化，采用运行时动态配置，避免重复打包。
3. 注意路由base设置：当部署在不同子路径下时，需在vue-router的createRouter中配置history的base属性，该值可通过环境变量或window.__CONFIG__动态获取。
4. 静态资源路径（publicPath）也要根据域名或子路径调整，避免资源404。