nuxt静态部署打包相对路径操作


Posted in Javascript onNovember 06, 2020

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

nuxt静态部署打包相对路径操作

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

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

nuxt项目中 nuxt.config.js :

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

打包后的文件:

nuxt静态部署打包相对路径操作

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

nuxt静态部署问题

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

文件:nuxt.config.js

// 自定义配置路由
router: {
  mode: 'hash', // 使用 'hash' 主要是为了适配以相对路径打开的静态站点, 必须使用 'hash' 否则路由跳转不生效
  // base: '/moli/',
  base: process.env.NODE_ENV === 'production' ? './' : '/', // 使用 './' 主要是为了适配以相对路径打开的静态站点
  extendRoutes(routes, resolve) {
   routes.push({
    path: '/',
    redirect: {
     name: 'home'
    }
   })
  }
 },

以上这篇nuxt静态部署打包相对路径操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
JS分页控件 可用于无刷新分页
Jul 23 Javascript
javaScript实现浮点数转十六进制字符
Oct 29 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
js实现的简单radio背景颜色选择器代码
Aug 18 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
Feb 18 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 Javascript
vue el-table实现行内编辑功能
Dec 11 Javascript
你知道JavaScript Symbol类型怎么用吗
Jan 08 Javascript
JavaScript语句错误throw、try及catch实例解析
Aug 18 Javascript
全网小程序接口请求封装实例代码
Nov 06 #Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
Nov 06 #Javascript
微信小程序自定义tabBar的踩坑实践记录
Nov 06 #Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 #Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
Nov 06 #Javascript
vue中的计算属性和侦听属性
Nov 06 #Javascript
nuxt.js添加环境变量,区分项目打包环境操作
Nov 06 #Javascript
You might like
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
IE8 浏览器Cookie的处理
2009/01/31 Javascript
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
2017/09/07 Javascript
使用JS获取SessionStorage的值
2018/01/12 Javascript
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
在Python中处理时间之clock()方法的使用
2015/05/22 Python
Python编程中归并排序算法的实现步骤详解
2016/05/04 Python
python实现批量按比例缩放图片效果
2018/03/30 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
selenium自动化测试入门实战
2020/12/21 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
IRO美国官网:法国服装品牌
2018/03/06 全球购物
外贸实习生自荐信范文
2013/11/24 职场文书
优秀的2014年两会精神解读
2014/03/17 职场文书
行政专员求职信范文
2014/05/03 职场文书
个人课题方案
2014/05/08 职场文书
公司离职证明样本
2014/09/13 职场文书
债务纠纷委托书范本
2014/10/14 职场文书
小学大队委竞选口号
2015/12/25 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
pytorch中Schedule与warmup_steps的用法说明
2021/05/24 Python
关于python中模块和重载的问题
2021/11/02 Python