vue打包后修改服务器地址
时间: 2023-11-20 22:05:11 浏览: 45
如果你使用的是 Vue CLI 4.x 版本,可以通过在 `.env` 文件中设置环境变量来实现修改服务器地址。具体步骤如下:
1. 在项目根目录下创建 `.env` 文件。
2. 在 `.env` 文件中添加以下内容:
```
VUE_APP_API_URL=http://your.api.server.url
```
`VUE_APP_API_URL` 是自定义的环境变量名,`http://your.api.server.url` 是你要修改的服务器地址。
3. 在 Vue 代码中使用环境变量:
```javascript
const apiUrl = process.env.VUE_APP_API_URL
```
这样,在打包后,`apiUrl` 就会被替换为 `.env` 文件中设置的服务器地址。
如果你使用的是 Vue CLI 3.x 版本,可以在 `vue.config.js` 文件中通过 `configureWebpack` 选项来设置环境变量。具体步骤如下:
1. 在项目根目录下创建 `vue.config.js` 文件。
2. 在 `vue.config.js` 文件中添加以下内容:
```javascript
module.exports = {
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
'process.env': {
VUE_APP_API_URL: JSON.stringify('http://your.api.server.url')
}
})
]
}
}
```
`VUE_APP_API_URL` 是自定义的环境变量名,`http://your.api.server.url` 是你要修改的服务器地址。
3. 在 Vue 代码中使用环境变量:
```javascript
const apiUrl = process.env.VUE_APP_API_URL
```
这样,在打包后,`apiUrl` 就会被替换为 `vue.config.js` 文件中设置的服务器地址。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)