Vue+ElementUI 搭建後臺管理系統（實戰系列八）

前言

使用ElementUI已經有一段時間了，在一邊上手開發後臺管理系統的同事，也記錄了一些筆記，一直都沒有時間將這些零零散散的筆記總結起來，整理成一個比較系統詳細一點的教程，可以留着以後來看。

---

Vue+ElementUI 搭建後臺管理系統（實戰系列八）-打包部署到服務器的問題

vue-element-admin裏面使用npm run build:prod打包步驟

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查看一下這是爲啥，會發現這些文件的路徑訪問不到。

解決辦法，需要打開routers.js文件，路由模式將histroy改成hash模式，起初 mode:'history'

打開vue.config.js文件，打開

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

註釋掉

 //publicPath: './',

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

使用npm run build:prod 遇到的請求被重定向的問題

在vue的項目開發完成之後，需要使用npm run build

在本地的dist靜態目錄打開，index.html進行訪問的時候，會發現這樣的一個問題。

Request method 'GET' not supported

打開F12，查看報錯，可以發現，在登錄的這個請求上，原本的post請求，被重定向成get 請求了，所以纔會報錯。

那麼，爲什麼在本地測試環境裏面一些正常的項目，使用了npm run build:prod ，打包之後，就會出現了問題哩？，帶着這個疑問，我上網百度了一下，找到了原因，我在開發項目的時候使用到了反向代理，Nginx反向代理後Post請求自動轉換爲Get，雖然不知道是啥子原理，那總算是找到了問題所在了。

解決辦法：
在打包之前，將代理註釋一下，打開vue.config.js文件，找到proxy
將這一段代碼註釋掉，重新打包即可解決問題。