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 表单下所有元素的隐藏
Jul 25 Javascript
javascript delete 使用示例代码
Mar 29 Javascript
JavaScript页面模板库handlebars的简单用法
Mar 02 Javascript
AngularJs 常用的过滤器
May 15 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
webpack使用 babel-loader 转换 ES6代码示例
Aug 21 Javascript
jquery实现左右轮播切换效果
Jan 01 jQuery
深入理解vue中slot与slot-scope的具体使用
Jan 26 Javascript
详解Vue取消eslint语法限制
Aug 04 Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 Javascript
vue element table中自定义一些input的验证操作
Jul 18 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 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 解决substr()截取中文字符乱码问题
2016/07/18 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
用JS中split方法实现彩色文字背景效果实例
2016/08/24 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
JS从非数组对象转数组的方法小结
2018/03/26 Javascript
Vue之mixin全局的用法详解
2018/08/22 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
js实现批量删除功能
2020/08/27 Javascript
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
django Serializer序列化使用方法详解
2018/10/16 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
Python 如何批量更新已安装的库
2020/05/26 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
CSS3中的opacity属性使用教程
2015/08/19 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
商务日语毕业生自荐信
2013/11/23 职场文书
大学生自我鉴定
2013/12/08 职场文书
财务主管自我鉴定
2014/01/17 职场文书
医院检讨书范文
2014/02/01 职场文书
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
高中军训感想800字
2014/02/23 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
2014年领班工作总结
2014/11/25 职场文书
观看《杨善洲》宣传教育片心得体会
2016/01/23 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
党组织结对共建协议书
2016/03/23 职场文书
MySQL 角色(role)功能介绍
2021/04/24 MySQL
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python