How to package and modify the access page path in vue

After Vue is packaged, the default access path is /index.html. If you need to modify the access path, you can follow the following steps.

1. Open the config/index.js file

After the Vue project is created, you can see the index.js file in the config directory and open the file.

2. Modify build.assetsPublicPath

Find build.assetsPublicPath in the file. This attribute represents the public path of the static resource, that is, the static resource is referenced in the generated index.html file path of.

The default value is '/', which means that the path of the static resource is relative to the root directory where the index.html file is located.

If you need to modify the access path to '/myApp/', you need to set the value of build.assetsPublicPath to '/myApp/'.

assetsPublicPath: '/myApp/'

3. Modify build.assetsSubDirectory

In the same file, find build.assetsSubDirectory. This attribute represents the storage directory of static resources.

The default value is 'static', which means that static resources are stored in the static directory under the project root directory.

If you need to store static resources in the myApp/static directory in the project root directory, you need to set the value of build.assetsSubDirectory to 'myApp/static'.

assetsSubDirectory: 'myApp/static'

4. Modify the router mode

If you use the router mode for page routing, you also need to modify the router mode.

In the router/index.js file, find the code to create the Router instance:

const router = new Router({
  mode: 'history',
  routes: [...]
})

Modify the mode to 'hash', which means using hash mode for page routing.

const router = new Router({
  mode: 'hash',
  routes: [...]
})

5. Execute the packaging command

After modifying the above configuration, you need to re-execute the packaging command to package.

Execute the packaging command:

npm run build

After waiting for the packaging to be completed, the generated file can be deployed to the server, and the access path is the set path.

The above is the detailed content of How to package and modify the access page path in vue. For more information, please follow other related articles on the PHP Chinese website!