This is the 8th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

preface

Using ElementUI already has a period of time, in the side to fit the development background management system’s colleague, also recorded some notes, has not time to sum up, the odd note into a more detail tutorial system, can be left to look at, just saw on the nuggets about August more challenge activity, After reading it, I was moved and decided to spend some time and energy to participate in this more meaningful activity.

Vue+ElementUI build background management system (actual Combat series 8) – package deployment to the server issues
Use NPM run build:prod to package the steps in vue-element-admin

1: Open.env.development, set the interface address to online access, and comment local VUE_APP_BASE_API = ‘/’

ENV = 'development' # interface address VUE_APP_BASE_API = '/' # # VUE_APP_WS_API = 'http://192.168.4.103:8091/' is enabled Babel-plugin-dynamic-import-node plug-in VUE_CLI_BABEL_TRANSPILE_MODULES = trueCopy the code

2: Open the.env.local file and.env.production file, as above

3: Open vue.config.js and comment out proxy. Proxy needs to be commented when packaging, but usually development needs to be opened.

// 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' // } // } // }Copy the code

4: White screen after using the NPM run build:prod command

One of the things that happens is that you generate a static folder and when you open index. HTML, you have a blank page, and you go to F12 and see why, and you see that the path to these files is not accessible.

If you want to open these routers, you need to open the histroy file and change the routing mode to hash mode. At first, the mode is “history”.

Open the vue.config.js file, open

// publicPath can be used in hash mode: process.env.node_env === 'development'? '/', '/',Copy the code

Comment out the

 //publicPath: './',
Copy the code

5: Run the NPM run build:prod command again

Problem with requests being redirected when using NPM Run build:prod

After vue’s project development is complete, you need to use NPM Run build

One such problem can be found when the local dist static directory is opened and index.html is accessed.

Request method 'GET' not supported
Copy the code

Open F12, check the error, you can find that on the login request, the original POST request was redirected to get request, so the error is reported.

So why do normal projects in the local test environment have problems when they are packaged with NPM run build:prod? “With this question in mind, I searched the Internet and found the reason. I used the reverse proxy during the development of the project. Post requests are automatically converted to Get after the Nginx reverse proxy.

Solution: Before packaging, comment the proxy, open the vue.config.js file, find the proxy, comment out the code, and repackage the code to solve the problem.