关于vue脚手架创建项目时使用vue代理的一些问题

可以根据不同的环境去更改打包时候不同的代理地址
创建env文件来区分不同的环境

.env.development(开发环境)
.env.production(生产环境)
可以通过设置NODE_ENV = production来进行判断为什么环境来设置不同的请求URL
VUE_APP_BASE_API = '' 通过设置不同api进行不同的代理判断
switch (process.env.NODE_ENV) { 
    case 'development': 
        baseUrl = "http://192.168.1.105:8080/admin/v1/"  //开发环境url  
        break 
 
    case 'production': 
            baseUrl = "https://www.baidu.com/admin/v1/"  //生产环境url 
        break 
}

一般服务器和项目部署在同一ip下，可以使用vue的反向代理进行请求的设置，就不用判断请求的URL地址，直接进行代理，不同的环境代理的地址不一样，
如下：

.env.development  //开发环境代理到这个位置
VUE_APP_BASE_API = '/dev-api'
.env.production  //生产环境代理到这个位置
VUE_APP_BASE_API = '/prod-api'

vue.config.js

module.exports = {
    publicPath: './', // 相对于 HTML 页面（目录相同）部署应用包时的基本 URL
    outputDir: 'dist',//生成的生产环境构建文件的目录 ,默认是dist
    assetsDir:'static',//用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
    // indexPath:'index.html',// 指定生成的 index.html 的输出路径 (相对于 outputDir)
    // filenameHashing:true,//生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存,false 来关闭文件名哈希
    
    //反向代理，打正式包代理的时候会失效
    devServer: {
        port: 8080, //端口号
        host:'localhost',
        open:true, //浏览器自动访问
        proxy: {
        //通过不同的环境来代理到不同的位置
            [process.env.VUE_APP_BASE_API]: {//代理
                target: 'http://192.168.1.104:8080', //API服务器的地址
                // ws: true,  //代理websockets 
                changeOrigin: true,//设置true 代表跨域访问
                secure: false,  // 如果是https接口，需要配置这个参数
                pathRewrite: {   //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
               			['^' + process.env.VUE_APP_BASE_API]: ''
            }
        }
    }

打包的时候根据不同的名字来设置不同的打包方式

修改package.json脚本：
"scripts": { 
   "dev": "vue-cli-service serve", 
   "build:prod": "vue-cli-service build --mode production",
   "build:test": "vue-cli-service build --mode test"
 }