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 相关文章推荐
Jquery + Ajax调用webService实例代码(asp.net)
Aug 27 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
Mar 29 Javascript
js函数的延迟加载实现代码
Oct 11 Javascript
基于jQuery实现图片的前进与后退功能
Apr 24 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
May 21 Javascript
使用JavaScript实现连续滚动字幕效果的方法
Jul 07 Javascript
canvas学习之API整理笔记(二)
Dec 29 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
JS实现动态给标签控件添加事件的方法示例
May 13 Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 Javascript
解决axios post 后端无法接收数据的问题
Oct 29 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 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
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
Ajax PHP分页演示
2007/01/02 PHP
简单的php写入数据库类代码分享
2011/07/26 PHP
php实现上传图片文件代码
2015/07/19 PHP
图片自动缩小 点击放大
2008/07/07 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
javascript控制层显示或隐藏的方法
2015/07/22 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
2019/11/19 Javascript
详解Vue的七种传值方式
2021/02/08 Vue.js
Python实现多线程HTTP下载器示例
2017/02/11 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
Python实战购物车项目的实现参考
2019/02/20 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
python实现PolynomialFeatures多项式的方法
2021/01/06 Python
Python命令行参数argv和argparse该如何使用
2021/02/08 Python
尽职尽责村干部自我鉴定
2014/01/23 职场文书
亲子读书活动方案
2014/02/22 职场文书
学习雷锋精神演讲稿
2014/05/10 职场文书
四风问题对照检查材料
2014/09/22 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书
初中化学教学反思
2016/02/22 职场文书
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python
Java Socket实现多人聊天系统
2021/07/15 Java/Android