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

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

1：打开.env.development
将接口地址设置成线上访问
注释本地
VUE_APP_BASE_API = ‘/‘

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

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

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

  1. //打包的时候需要注释
  2.     //平时开发需要开着
  3.     // proxy: {
  4.     //   '/api': {
  5.     //     target: process.env.VUE_APP_BASE_API,
  6.     //     changeOrigin: true,
  7.     //     pathRewrite: {
  8.     //       '^/api': 'api'
  9.     //     }
  10.     //   },
  11.     //   '/check': {
  12.     //     target: process.env.VUE_APP_BASE_API,
  13.     //     changeOrigin: true,
  14.     //     pathRewrite: {
  15.     //       '^/check': 'check'
  16.     //     }
  17.     //   }
  18.     // }

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

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

1ef5ebe75a0cd483d625a044c4d64ce0.png

图片.png

解决办法

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

9ab083d1994ec1238ceb83a3a0ac86ff.png

打开vue.config.js文件
打开

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

注释掉

  1. //publicPath: './',

d83be47716ac3f2d6fc5d5bb105174d9.png

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

发表评论

表情：
评论列表 （有 0 条评论，480人围观）

还没有评论，来说两句吧...

相关阅读