Shulou(Shulou.com)05/31 Report--

This article introduces the "subordinate vue project access path setting non-root display white screen how to solve" related knowledge, in the actual case operation process, many people will encounter such a dilemma, then let the editor lead you to learn how to deal with these situations! I hope you can read it carefully and be able to achieve something!

Vue access path setting non-root display white screen

Question:

Visit the page and return "We're sorry but XXX doesn't work properly without JavaScript enabled. Please enable it to continue."

Environment:

When using nginx to deploy a vue project, the access project is not set as the root path

Description:

When the nginx configuration corresponding to the access project is not set to root for the project access path, the page displays a blank screen, and you can see that all resources have been loaded in the network.

Index.html will display

"We're sorry but XXX doesn't work properly without JavaScript enabled. Please enable it to continue." Information

If the nginx configuration access path of the project is set to the root path, the website page can be accessed normally, but the request return will still have this information, which is written in the index.html page.

The reason for the analysis is that the access path will be judged in the vue project, and if it is not the root path, the js code will not be executed and the white screen will be displayed.

Solve

For vue project, the access path is not the root directory. You can access it normally by following the steps below.

1. Modify vue.config.js and set pbulicPath path

two。 Set up base information in a rout

3. Modify nginx to set location / webroot in serve

Vue deployment to non-root directory settings

Suppose you deploy to the app folder under the root directory

Three configurations need to be modified

1.config = > index.js

/ / Paths assetsRoot: path.resolve (_ _ dirname, ".. / dist"), assetsSubDirectory: "static", assetsPublicPath: "/ app/", / / modify the path here after the package

Change assetsPublicPath: "/" to assetsPublicPath: "/ app/"

2.router = > index.js

Const router = new Router ({mode: "history", / / base: getAbsolutePath (), base: "/ app/", routes: [...].

Add the base path base: "/ app/"

3. Modify the configuration file under the root folder of the website, using IIS

Modify

For

This is the end of the content of "how to set the non-root display white screen for subordinate vue project access path setting". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.