Vue-element-admin打包发布和白屏、proxy跨域等问题

太过爱你忘了你带给我的痛 2022-11-13 10:23 368阅读 0赞

## Vue项目打包发布 ##

cd vue-admin-template
    
    # 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
    npm install --registry=https://registry.npm.taobao.org
    
    # 启动服务
    npm run dev
    
    # 构建测试环境
    npm run build:stage
    
    # 构建生产环境
    npm run build:prod

1.**先查看README.md文件**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70][]

2.**再看两个文件 package.json 里面包含打包脚本**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70 1][]

[vue-element-admin打包发布\_小贝壳-CSDN博客][vue-element-admin_-CSDN]

1.修改.env.production文件的VUE\_APP\_BASE\_URL参数为真实的生产服务器地址

2.执行打包命令，生成dist目录 包含Ruoyi-vue打包也是这个命令

# 打包正式环境
    npm run build:prod
    
    # 打包预发布环境
    npm run build:stage

vue.config.js里面

publicPath: './',

因为有个问题，会存在static/js资源找不到的问题，原因是 默认的 vue-admin-template 中的 vue.config.js 中的 publicPath 是 ‘/’,  这样会导致打包出来的js都是 / 开头的，即是根路径下的文件，但我们往往不需要这样，修改为 './'， 意思为当前路径下。

但我们如果直接打开dist文件夹中的 index.html文件会发现js文件加载不了等问题，翻看文档可知需要把 这些静态文件发布到静态服务器中。

# 巨坑！！！ #

main.js 里面

if (process.env.NODE_ENV === 'production') {
      const { mockXHR } = require('../mock')
      mockXHR()
    }
    
    推荐把这段删除或者 注释掉！！！
    
    // if (process.env.NODE_ENV === "development") {
    //   const {
    //     mockXHR
    //   } = require("../mock");
    //   mockXHR();
    // }
    
    正确应该是 process.env.NODE_ENV === "development"

### 解决跨域 ###

**跨域说明: '/test' 说明接口路径中含/test这部分前面所有:包括自身(/test)部分，包括（ip,端口，其他/api/路径）都替换成target目标地址代理去访问。**

**[vue-cli proxyTable中跨域中pathRewrite 怎么用][vue-cli proxyTable_pathRewrite]**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70 2][]

const service = axios.create({
      // baseURL: process.env.BASE_API, // api的base_url
      timeout: 5000 // 请求超时时间
    });
    
    ！！！一般不写baseURL:xxx,代理生效
    
    baseURL: process.env.BASE_API, //注释代码 代理生效，
    或者 baseURL:'/apis',再设置apis的代理

普通Vue2.x项目在所在的config文件下的index.js 也是设置 proxyTable: {},
    
    dev.env.js
    
    proxyTable: {
      '/admin': {     //这里是公共部分，在调用接口时后面接不相同的部分，/admin就相当于http://192.168.0.199:8926/admin这一段
        target: ‘http://www.newpay.com/‘,   //这里写的是访问接口的域名和端口号
        changeOrigin: true, // 必须加上这个才能跨域请求
        pathRewrite: {  // 重命名
          ‘^/admin‘: ‘‘
        }
      }
    },

vue.config.js
    
    devServer: {
        port: port,
        open: true,
        overlay: {
          warnings: false,
          errors: true
        },
        headers: {
          'Access-Control-Allow-Origin': '*',     //允许所有域名访问 
          'Access-Control-Allow-Credentials': 'true' //是否允许后续请求携带认证信息（cookies）,该值只能是true,否则不返回
        },
        proxy: {
          // change xxx-api/login => mock/login
          // detail: https://cli.vuejs.org/config/#devserver-proxy
          ['/api' + process.env.VUE_APP_DEMO]: {
            target: process.env.VUE_APP_BASE_API + '/api' + process.env.VUE_APP_DEMO,
            pathRewrite: { ['^/api' + process.env.VUE_APP_DEMO]: '' },
            changeOrigin: true,
            secure: false
          },
          // 00
          '/foshan-api': {
            target: 'http://157.148.74.18:8010',  //服务器id
            pathRewrite: { '^/foshan-api': '/foshan-api' },//完整路由
            changeOrigin: true,
            secure: false
          },
          // change xxx-api/login => mock/login
          // detail: https://cli.vuejs.org/config/#devserver-proxy
          [process.env.VUE_APP_BASE_API]: {
            target: `http://127.0.0.1:${port}/mock`,
            changeOrigin: true,
            pathRewrite: {
              ['^' + process.env.VUE_APP_BASE_API]: ''
            }
          }
        },
        before: require('./mock/mock-server.js')
      },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70]: /images/20221022/bf0aa2a5cf204a96b597e13381815ec8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70 1]: /images/20221022/f00e6e25ca3f4ca787064d418cb97a2d.png
[vue-element-admin_-CSDN]: https://blog.csdn.net/u012874077/article/details/104896997
[vue-cli proxyTable_pathRewrite]: https://www.cnblogs.com/hanguidong/p/9460495.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210824103818287.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ=,size_16,color_FFFFFF,t_70