How to solve problems when deploying Vue projects to the server

This article mainly introduces the solution to the problem of deploying the Vue project to the server. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor and take a look.

I believe that when many friends use the scaffolding installed by Vue-cli to develop, the project can run normally in the development environment, but after entering the production environment, after compilation and packaging , put it into the server, the project will not work properly, and problems such as blank pages or routing jumps 404 will appear. Don't panic if you encounter these problems. Correct configuration and simple cooperation of the backend can solve them.

How to package

Based on Vue-Cli, packaging is performed through npm run build

How to deploy

1. The packaged resources based on Vue-Cli usually have a static directory and an index.html file in the dist directory. You can directly throw these two files to the server

2. But sometimes, we will throw the dist file directly to the server

Problems that occur

1. After packaging to the server, the problem of resource reference path appears

2. After packaging to the server, the problem of blank page appears

3. After being packaged to the server, the type of the imported css was intercepted and converted to "text/plain"

4. After being packaged to the server, the problem of route refresh 404 occurred

The author below will tell you how to solve these problems based on the experience of compiling and packaging the Vue project to normal deployment of the server.

1. Front-end configuration:

① Router configuration--specify the route start (in development mode, the Vue project is placed in webpack and generated with nodeJs The root directory of the local server, but in the real server, the project will definitely not be placed in the root directory, so the base of the router must be specified)

router

Discuss with the backend in advance the server folder path for project deployment

②, compile and package configuration

Enter config --> index.js

build

③. Use npm run build for packaging. So far, all the configurations that the front-end can do have been completed.

2. Back-end configuration:

404 appears in route jump. The main reason is that the backend does not do any processing for this virtual front-end route. When the server cannot find the resource under the specified path, it can only return 404 to the client.

Solution (Apache): Rewrite url --- Rewrite the path in the server folder where the Vue project is located, for example:

leibo.group/pcMall/.... For leibo.group/pcMall/index.html

.hatccess

, enable allowoverride, url rewrite, and the backend can be solved in minutes

If it is another type of server

Please refer to https://router.vuejs.org/zh-cn/essentials/history-mode.html

Summary: In the single-page deployment server, it is actually more of a change in thinking, using front-end routing to control changes in user interface content. The above is some of the author's experience in the project deployment server. If there is anything inappropriate in the explanation, please point it out. !

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement axios secondary encapsulation in vue

How to use audio components in WeChat mini programs

How to use the video component to play videos in the WeChat mini program

How to implement the download progress bar in the WeChat mini program

How to use the mobile phone number verification tool class PhoneUtils in javaScript

The above is the detailed content of How to solve problems when deploying Vue projects to the server. For more information, please follow other related articles on the PHP Chinese website!