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 相关文章推荐
JavaScript中“+=”的应用
Feb 02 Javascript
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
从JavaScript 到 JQuery (1)学习小结
Feb 12 Javascript
Iframe 自适应高度并实时监控高度变化的js代码
Oct 30 Javascript
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
根据json字符串生成Html的一种方式
Jan 09 Javascript
解析prototype,JQuery中跳出each循环的方法
Dec 12 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
Mar 25 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
Javascript的表单验证-揭开正则表达式的面纱
Mar 18 Javascript
layui导出所有数据的例子
Sep 10 Javascript
Vue使用Three.js加载glTF模型的方法详解
Jun 14 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可逆加密解密算法实例代码
2014/01/21 PHP
PHP中的插件机制原理和实例
2014/07/08 PHP
ThinkPHP查询返回简单字段数组的方法
2014/08/25 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
浅谈JavaScript之事件绑定
2013/07/08 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
angular十大常见问题
2017/03/07 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
在Django中限制已登录用户的访问的方法
2015/07/23 Python
Python的迭代器和生成器
2015/07/29 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
Python实现word2Vec model过程解析
2019/12/16 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
Python super()函数使用及多重继承
2020/05/06 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
python opencv实现图像配准与比较
2021/02/09 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
什么是接口(Interface)?
2013/02/01 面试题
Java面试题及答案
2012/09/08 面试题
争论的故事教学反思
2014/02/06 职场文书
机电专业大学生职业规划书范文
2014/02/25 职场文书
摄影专业毕业生求职信
2014/03/13 职场文书
铲车司机岗位职责
2014/03/15 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书