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 相关文章推荐
window.open()详解及浏览器兼容性问题示例探讨
May 29 Javascript
JavaScript判断变量是对象还是数组的方法
Aug 28 Javascript
jQuery+PHP打造滑动开关效果
Dec 16 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 Javascript
浅谈JavaScript正则表达式分组匹配
Apr 10 Javascript
BootStrap table使用方法分析
Nov 08 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
Node.js JSON模块用法实例分析
Jan 04 Javascript
vue+axios实现post文件下载
Sep 25 Javascript
基于angular实现树形二级表格
Oct 16 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&MYSQL服务器配置说明
2006/10/09 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
理解Angular数据双向绑定
2016/01/10 Javascript
前端性能优化及技巧
2016/05/06 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
python 网络编程详解及简单实例
2017/04/25 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
亚洲领先的设计购物网站:Pinkoi
2020/11/26 全球购物
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
会计专业推荐信
2013/10/29 职场文书
秋季校运动会广播稿
2014/02/23 职场文书
学习2014年全国两会心得体会
2014/03/12 职场文书
竞选班干部演讲稿600字
2014/08/20 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
热血教师观后感
2015/06/10 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
汽车销售员工作总结
2015/08/12 职场文书
MySQL 不等于的三种使用及区别
2021/06/03 MySQL
Python多线程实用方法以及共享变量资源竞争问题
2022/04/12 Python