vue2项目中，如何配置环境，可以在打完包之后修改请求的服务器地址

Question

vue2项目中，如何配置环境，可以在打完包之后，修改请求的服务器地址，或者修改其他相关的数据

Answer 1

AIGC生成：

---

Vue2 项目中配置环境，修改请求服务器地址

Vue2 项目中，可以使用环境变量（Environment Variables）来配置环境和修改请求服务器地址。

1. 在 vue.config.js 文件中，添加环境变量：

module.exports = {
  // ...
  configureWebpack: {
    // ...
    plugins: [
      new webpack.EnvironmentPlugin({
        NODE_ENV: 'development', // 或 'production'
        BASE_URL: 'http://localhost:8080' // 或其他服务器地址
      })
    ]
  }
}

1. 在组件中，使用 $env 对象访问环境变量：

<template>
  <div>
    <button @click="changeServer">切换服务器</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      serverUrl: 'http://localhost:8080'
    }
  },
  methods: {
    changeServer() {
      this.serverUrl = 'http://new-server.com'
    }
  }
}
</script>

1. 使用 axios 或其他 HTTP 客户端库，修改请求服务器地址：

import axios from 'axios'

axios.create({
  baseURL: this.serverUrl
})

这样，在打包完成后，可以通过修改环境变量来更改请求服务器地址。

代码示例

// vue.config.js
module.exports = {
  // ...
  configureWebpack: {
    // ...
    plugins: [
      new webpack.EnvironmentPlugin({
        NODE_ENV: 'development', // 或 'production'
        BASE_URL: 'http://localhost:8080' // 或其他服务器地址
      })
    ]
  }
}

// main.js
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'

Vue.prototype.$axios = axios.create({
  baseURL: process.env.BASE_URL
})

new Vue({
  render: h => h(App)
}).$mount('#app')

// App.vue
<template>
  <div>
    <button @click="changeServer">切换服务器</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      serverUrl: process.env.BASE_URL
    }
  },
  methods: {
    changeServer() {
      this.serverUrl = 'http://new-server.com'
    }
  }
}
</script>

重要提示

在生产环境中，建议使用环境变量来配置环境和修改请求服务器地址，而不是在代码中硬编码服务器地址。

---