npm run build:prod打包步骤

待我称王封你为后i 2022-09-02 08:10 452阅读 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查看一下这是为啥，会发现这些文件的路径访问不到  
![图片.png][.png]

解决办法

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

![025dbb1e663405536a58f03f192946f7.png][]

打开vue.config.js文件  
打开

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

注释掉

//publicPath: './',

![d83be47716ac3f2d6fc5d5bb105174d9.png][]

5:重新执行命令，npm run build:prod，即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]

[.png]: /images/20220829/53bb3ef3b19043f597a2dd38b78504ad.png
[025dbb1e663405536a58f03f192946f7.png]: /images/20220829/09d69e1fc63441bb9429aea7e386c227.png
[d83be47716ac3f2d6fc5d5bb105174d9.png]: /images/20220829/61402dfb7f134f53846780f262421c1a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]: /images/20220829/43a9c514692442139288e46c5b394652.png