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 相关文章推荐
encode脚本和normal脚本混用的问题与解决方法
Mar 08 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
Nov 11 Javascript
JS.getTextContent(element,preformatted)使用介绍
Sep 21 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
Feb 26 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
跟我学习javascript的var预解析与函数声明提升
Nov 16 Javascript
JS动态插入并立即执行回调函数的方法
Apr 21 Javascript
Js自定义多选框效果的实例代码
Jul 05 Javascript
解决bootstrap模态框数据缓存的问题方法
Aug 10 Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 Javascript
javascript实现时间日期的格式化的方法汇总
Aug 06 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中利用post传递字符串重定向的实现代码
2011/04/21 PHP
深入解析PHP的引用计数机制
2013/06/14 PHP
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
微信支付开发交易通知实例
2016/07/12 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
jQuery之网页换肤实现代码
2011/04/30 Javascript
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
javascript 原型继承介绍
2011/08/30 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
2015/10/23 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
jupyter安装小结
2016/03/13 Python
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
python实现彩票系统
2020/06/28 Python
Python多进程与服务器并发原理及用法实例分析
2018/08/21 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
eDreams葡萄牙:全球最大的在线旅行社之一
2019/04/15 全球购物
学校司机岗位职责
2013/11/14 职场文书
自我评价优秀范文分享
2013/11/30 职场文书
电大毕业个人生自我鉴定
2014/03/26 职场文书
汽车广告策划方案
2014/05/31 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书
go select编译期的优化处理逻辑使用场景分析
2021/06/28 Golang
利用Sharding-Jdbc进行分库分表的操作代码
2022/01/22 Java/Android
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android