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 相关文章推荐
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
深入理解JavaScript系列(13) This? Yes,this!
Jan 18 Javascript
模拟多级复选框效果的jquery代码
Aug 13 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
jQuery分组选择器用法实例
Dec 23 Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
Jan 27 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
Sep 09 Javascript
electron + vue项目实现打印小票功能及实现代码
Nov 25 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 Javascript
JavaScript中关于预编译、作用域链和闭包的理解
Mar 31 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
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
php图片的二进制转换实现方法
2014/12/15 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
PHP的Yii框架中使用数据库的配置和SQL操作实例教程
2016/03/17 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
jquery 获取json数据实现代码
2009/04/27 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
vue引用外部JS的两种种方法
2020/01/28 Javascript
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
Python创建日历实例
2014/08/21 Python
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
python中while和for的区别总结
2019/06/28 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
Python中实现输入一个整数的案例
2020/05/03 Python
广告传媒专业应届生求职信
2014/03/01 职场文书
商场客服专员岗位职责
2014/06/13 职场文书
房屋维修协议书范本
2014/09/25 职场文书
2014年数学教师工作总结
2014/12/03 职场文书
2014年生产部工作总结
2014/12/17 职场文书
接待员岗位职责范本
2015/04/15 职场文书
教学质量月活动总结
2015/05/11 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书