vue-element-admin里面使用npm run build:prod打包步骤

谁践踏了优雅 2023-01-24 02:09 346阅读 0赞

1：打开.env.development  
将接口地址设置成线上访问  
注释本地  
VUE\_APP\_BASE\_API = '/'

ENV = 'development'
    
    # 接口地址
    VUE_APP_BASE_API  = '/'
    #VUE_APP_WS_API = 'http://192.168.4.103:8091/'
    
    # 是否启用 babel-plugin-dynamic-import-node插件
    VUE_CLI_BABEL_TRANSPILE_MODULES = true

2：打开.env.local文件和.env.production文件  
同上

3：打开vue.config.js  
注释掉proxy  
proxy代理在打包的时候需要注释，平时开发需要开着

//打包的时候需要注释
        //平时开发需要开着
        // proxy: {
        //   '/api': {
        //     target: process.env.VUE_APP_BASE_API,
        //     changeOrigin: true,
        //     pathRewrite: {
        //       '^/api': 'api'
        //     }
        //   },
        //   '/check': {
        //     target: process.env.VUE_APP_BASE_API,
        //     changeOrigin: true,
        //     pathRewrite: {
        //       '^/check': 'check'
        //     }
        //   }
        // }

4：关于使用npm run build:prod命令进行打包后白屏的问题

会出现这样的情况生成了一个静态的文件夹打开index.html的时候，会出现页面空白的问题，打开F12查看一下这是为啥，会发现这些文件的路径访问不到

![1ef5ebe75a0cd483d625a044c4d64ce0.png][]

图片.png

解决办法

需要打开routers.js文件，路由模式将histroy改成hash模式，起初 mode:'history'

![9ab083d1994ec1238ceb83a3a0ac86ff.png][]

打开vue.config.js文件  
打开

// hash 模式下可使用
      publicPath: process.env.NODE_ENV === 'development' ? '/' : './',

注释掉

//publicPath: './',

![d83be47716ac3f2d6fc5d5bb105174d9.png][]

5:重新执行命令，npm run build:prod，即可

[1ef5ebe75a0cd483d625a044c4d64ce0.png]: /images/20221004/33f9392f0ae24b53b4cafab54a86888d.png
[9ab083d1994ec1238ceb83a3a0ac86ff.png]: /images/20221004/94063d963d604fe084b7c8838a9b22c6.png
[d83be47716ac3f2d6fc5d5bb105174d9.png]: /images/20221004/f6a6791563204bd6a981584880499228.png