vue配置开发环境.env.development 和生产环境.env.production，在前端解决跨域问题

首先，确保你的项目根目录下有这两个文件.env.development和.env.production。

.env.development

# .env.development
VUE_APP_API_BASE_URL=http://localhost:3000

.env.production

# .env.production
VUE_APP_API_BASE_URL=https://production-api.example.com

在上面的例子中，我们使用了VUE_APP_API_BASE_URL作为API的基本URL。现在，你可以在Vue项目的代码中使用process.env.VUE_APP_API_BASE_URL来访问不同环境下的API基本URL。

接下来，你可以在项目中的vue.config.js文件中配置代理，以解决开发环境下的跨域问题。

vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: process.env.VUE_APP_API_BASE_URL,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

在上述代码中，我们使用了proxy选项来配置代理。所有以/api开头的请求将被代理到VUE_APP_API_BASE_URL所指定的地址，并通过changeOrigin: true确保请求头中的Host字段正确。

在生产环境中，你不需要配置代理，因为在生产环境下，你的前端代码和后端代码通常会部署到同一个域名下。

请注意，这只是解决开发环境下的跨域问题的一种方法。在生产环境中，你需要确保你的API服务器允许来自前端域的请求，通常通过CORS（跨源资源共享）设置来实现。