vite.config.js和vue.config.js跨域配置

vue.config.js

dev{
proxyTable: {
'/api': {
target: '<http://192.168.0.1:200>', // 要代理的域名
changeOrigin: true,//允许跨域
pathRewrite: {
'^/api': '' // 这个是定义要访问的路径，名字随便写
}
}
}

// /api/getMenu相当于\*<http://192.168.0.1:200/getMenu>
// /api相当于<http://192.168.0.1:200>
this.\$http.get("/api/getMenu", {
}
.then(res => {
})
.catch(function(error) {
});

以上配置只是在开发环境（dev）中解决跨域。要解决生产环境的跨域问题,则在`config/dev.env.js`和`config/prod.env.js`里也就是开发/生产环境下分别配置一下请求的地址`API_HOST`，开发环境中我们用上面配置的代理地址api，生产环境下用正常的接口地址。配置代码如下：

module.exports = merge(prodEnv, {
NODE\_ENV: '"development"',     //开发环境
API\_HOST:"/api/"
})

module.exports = {
NODE\_ENV: '"production"',      //生产环境
API\_HOST:'"<http://40.00.100.100:3002/>"'
}

vite.config.js

//详细版
import { defineConfig, loadEnv } from 'vite' // 帮手函数，这样不用 jsdoc 注解也可以获取类型提示
import path from 'path'
import createVitePlugins from './vite/plugins'

// https://vitejs.dev/config/
export default  defineConfig(({command, mode })=>{
 // 获取.env文件里定义的环境变量
const env = loadEnv(mode, process.cwd());
//console.log(env);   //变量在命令行里打印出来
//.env文件中的环境变量必须以VITE_为前缀，否则无法引用成功
const   {VITE_APP_ENV} = env

return{
 //项目部署在主域名的子文件使用,例如http://localhost:3000/myvite/。不填默认就是/
 base: VITE_APP_ENV==='字段名' ? '/' : '/', // 例子:env.VITE_APP_BASE_URL || '/'
 plugins: createVitePlugins(env, command === 'build'),
 resolve: {
      alias: {
        //别名配置
        "~": path.resolve(__dirname, "./"), //配置的别名
        "@": path.resolve(__dirname, "./src"),
      },
      //共享配置 https://cn.vitejs.dev/config/shared-options.html#resolve-extensions
      extensions : ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json','.vue']
  },
 //本地运行配置，以及反向代理配置
 server: {
   port: "9000",//端口
  // host: "localhost",//ip地址例如192.168.1.177
   host:true,
   open: true,//服务启动时自动在浏览器中打开应用
  // 反向代理配置
  proxy: { //配置多个代理
   '/dev-api': {
    target: "https://xxxx.com/",//例子:http://192.168.1.177:8080 或测试服务器https://xxxx.com
    changeOrigin: true,///设置访问目标地址允许跨域
    rewrite: (p) => p.replace(/^\/dev-api/, '')
   },
   '/prod-api': {
    target: "https://xxxx.com/",
    changeOrigin: true,///设置访问目标地址允许跨域
    rewrite: (p) => p.replace(/^\/prod-api/, '')
   },
  }
 },
 css: {
  // postCss 共享配置
  postcss: {
     plugins: [//扩展插件
          {
            postcssPlugin: 'internal:charset-removal',
            AtRule: {//大写AtRule
              charset: (atRule) => {
              //char set字符集
                if (atRule.name === 'charset') {
                  atRule.remove();//删除
                }
              }
            }
          }
      ]
  },
 },

 }
})