首页 > web前端 > 前端问答 > vue怎么打包修改访问页面路径

vue怎么打包修改访问页面路径

PHPz
发布: 2023-04-12 11:45:57
原创
3456 人浏览过

Vue打包之后,默认的访问路径是/index.html,如果需要修改访问路径,可以按照以下步骤来实现。

  1. 打开config/index.js文件

在Vue项目创建后,可以在config目录下看到index.js文件,打开该文件。

  1. 修改build.assetsPublicPath

在文件中找到build.assetsPublicPath,该属性表示静态资源的公共路径,即生成的index.html文件中引用静态资源的路径。

默认值为'/',表示静态资源的路径是相对于index.html文件所在的根目录。

如果需要修改访问路径为'/myApp/',则需要将build.assetsPublicPath的值设置为'/myApp/'。

assetsPublicPath: '/myApp/'
登录后复制
  1. 修改build.assetsSubDirectory

在同样的文件中,找到build.assetsSubDirectory,该属性表示静态资源的存放目录。

默认值为'static',表示静态资源存放在项目根目录下的static目录中。

如果需要将静态资源存放在项目根目录下的myApp/static目录下,则需要将build.assetsSubDirectory的值设置为'myApp/static'。

assetsSubDirectory: 'myApp/static'
登录后复制
  1. 修改router模式

如果使用了router模式进行页面路由,还需要修改router模式。

在router/index.js文件中,找到创建Router实例的代码:

const router = new Router({
  mode: 'history',
  routes: [...]
})
登录后复制

修改mode为'hash',表示使用hash模式进行页面路由。

const router = new Router({
  mode: 'hash',
  routes: [...]
})
登录后复制
  1. 执行打包命令

修改好以上配置后,需要重新执行打包命令进行打包。

执行打包命令:

npm run build
登录后复制

等待打包完成后,可以将生成的文件部署到服务器中,访问路径即为设置的路径。

以上是vue怎么打包修改访问页面路径的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板