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 相关文章推荐
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
Jun 06 Javascript
js hover 定时器(实例代码)
Nov 12 Javascript
Js判断CSS文件加载完毕的具体实现
Jan 17 Javascript
jQuery绑定事件不执行但alert后可以正常执行
Jun 03 Javascript
详解JavaScript中的4种类型识别方法
Sep 14 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
layui的数据表格+springmvc实现搜索功能的例子
Sep 28 Javascript
js实现点击烟花特效
Oct 14 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 Javascript
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
全网小程序接口请求封装实例代码
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
PHPlet在Windows下的安装
2006/10/09 PHP
PHP查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
PHP中如何实现常用邮箱的基本判断
2014/01/07 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(三)
2014/06/23 PHP
php socket客户端及服务器端应用实例
2014/07/04 PHP
php中return的用法实例分析
2015/02/28 PHP
Yii基于数组和对象的Model查询技巧实例详解
2015/12/28 PHP
crontab无法执行php的解决方法
2016/01/25 PHP
javascript引用对象的方法代码
2007/08/13 Javascript
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
移动端js图片查看器
2016/11/17 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
用python3读取python2的pickle数据方式
2019/12/25 Python
浅析Python 序列化与反序列化
2020/08/05 Python
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
个人自我鉴定写法
2013/11/30 职场文书
生日宴会主持词
2014/03/20 职场文书
小学生环保倡议书
2014/05/15 职场文书
英文慰问信范文
2015/03/24 职场文书
六年级作文之预言作文
2019/10/25 职场文书
python缺失值的解决方法总结
2021/06/09 Python
浅谈@Value和@Bean的执行顺序问题
2021/06/16 Java/Android
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python