nuxt打包路劲问题_nuxt静态部署打包相对路径操作_vue.js

本文主要介绍了在nuxt项目中遇到的打包路径问题,特别是当项目部署在二级域名下时,需要将绝对路径改为相对路径。通过修改nuxt配置,解决了静态部署后路由跳转失效的问题。建议在部署时使用'hash'模式,并通过nginx进行重定向。此外,还提到了nginx部署nuxt应用时可能遇到的挑战。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

以往在nuxt项目中,打包静态化部署的的文件如下:

25c0e71f171abaa993c74988af5ecb54.png

路径为绝对路径,当项目的域名为二级域名的时候,就不能打包为这绝对路径了。

nuxt不同于vue项目,思索了许久,终于找到了配置的地方:

nuxt项目中 :


module.exports = {
 router: {
   base: './'
 }
}

打包后的文件:

f183a1e8871536611910d222d860792e.png

补充知识:nginx部署,nuxt静态部署,路由跳转失效的问题

nuxt静态部署问题

静态部署:路由模式跳转失效的问题;不能使用历史模式,需要使用 ‘hash' 模式,再进行打包 ‘npm run generate'

文件:


// 自定义配置路由
router: {
  mode: 'hash', // 使用 'hash' 主要是为了适配以相对路径打开的静态站点, 必须使用 'hash' 否则路由跳转不生效
  // base: '/moli/',
  base: process.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值