vue打包之后,默认的访问路径是/index.html,如果需要修改访问路径,可以按照以下步骤来实现。
- 打开config/index.js文件
在Vue项目创建后,可以在config目录下看到index.js文件,打开该文件。
- 修改build.assetsPublicPath
在文件中找到build.assetsPublicPath,该属性表示静态资源的公共路径,即生成的index.html文件中引用静态资源的路径。
默认值为'/',表示静态资源的路径是相对于index.html文件所在的根目录。
如果需要修改访问路径为'/myApp/',则需要将build.assetsPublicPath的值设置为'/myApp/'。
立即学习“前端免费学习笔记(深入)”;
assetsPublicPath: '/myApp/'
- 修改build.assetsSubDirectory
在同样的文件中,找到build.assetsSubDirectory,该属性表示静态资源的存放目录。
默认值为'static',表示静态资源存放在项目根目录下的static目录中。
如果需要将静态资源存放在项目根目录下的myApp/static目录下,则需要将build.assetsSubDirectory的值设置为'myApp/static'。
assetsSubDirectory: 'myApp/static'
- 修改router模式
如果使用了router模式进行页面路由,还需要修改router模式。
在router/index.js文件中,找到创建Router实例的代码:
const router = new Router({
mode: 'history',
routes: [...]
})修改mode为'hash',表示使用hash模式进行页面路由。
const router = new Router({
mode: 'hash',
routes: [...]
})- 执行打包命令
修改好以上配置后,需要重新执行打包命令进行打包。
执行打包命令:
npm run build
等待打包完成后,可以将生成的文件部署到服务器中,访问路径即为设置的路径。










