How to solve the problem that changing the startup path of vue does not take effect

When I was developing using the Vue framework recently, I encountered a problem, that is, modifying the startup path of the Vue project did not take effect. It was still the default accessed localhost:8080 instead of a customized path. After some research and experiments, I found a solution to this problem and wrote this article, hoping to help more developers who encounter the same problem.

First, let’s take a look at the default startup path of the Vue project. In the Vue project, we use the basic template generated by the vue-cli scaffolding. The generated project structure is as follows:

projectName
│   package-lock.json
│   package.json
│   README.md
│
├───public
│       favicon.ico
│       index.html
│
└───src
        App.vue
        main.js

Among them, # under the public folder ##index.html is the entry file of the Vue project, where we can use the <%= BASE_URL %> variable to represent the root path of the project. The default mode of Vue is to start based on the / path, which is localhost:8080/. When I tried to modify this default path in the vue.config.js file, it never took effect.

According to the introduction in Vue official documentation, the following code should be added to the

vue.config.js file:

module.exports = {
    publicPath: '/newpath/'
}

In this way, the startup path of the project can be modified to

localhost:8080/newpath/. However, after experiments, this method did not take effect in our project because our project uses a second-level domain name for access, such as http://myproject.example.com instead of http://example.com/myproject path access method.

Therefore, we need to manually add the root path of the project in

index.html under the public folder. Find the tag in the index.html file, we can add the following code:

<base href="/newpath/">

The

/newpath/ here is Our customized startup path. In this way, no matter how we modify the publicPath in the vue.config.js file, we can correctly access the project. At the same time, we can also change the path to /, so that we can access the project through the second-level domain name.

In short, no matter how we modify the startup path of the Vue project, we need to set it manually instead of just making a setting in the

vue.config.js file. In actual projects, configuring the correct startup path will be a very important step.

The above is the detailed content of How to solve the problem that changing the startup path of vue does not take effect. For more information, please follow other related articles on the PHP Chinese website!