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实现树形二级菜单实例代码
Nov 20 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 Javascript
简介JavaScript中getUTCMonth()方法的使用
Jun 10 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 Javascript
深入浅析Node.js单线程模型
Jul 10 Javascript
vue中如何去掉空格的方法实现
Nov 09 Javascript
记一次用vue做的活动页的方法步骤
Apr 11 Javascript
node-red File读取好保存实例讲解
Sep 11 Javascript
对Layer弹窗使用及返回数据接收的实例详解
Sep 26 Javascript
JS实现简易留言板(节点操作)
Mar 16 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 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
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
php网站地图生成类示例
2014/01/13 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
常用PHP封装分页工具类
2017/01/14 PHP
PHP 中魔术常量的实例详解
2017/10/26 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
分页栏的web标准实现
2011/11/01 Javascript
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
Three.js源码阅读笔记(物体是如何组织的)
2012/12/27 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
详解Document.Cookie
2015/12/25 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
使用cookie绕过验证码登录的实现代码
2017/10/12 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
Vue 列表页带参数进详情页的操作(router-link)
2020/11/13 Javascript
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
Python3安装Scrapy的方法步骤
2017/11/23 Python
Python语言进阶知识点总结
2019/05/28 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
自荐书格式
2013/12/01 职场文书
财务部副经理岗位职责
2014/03/14 职场文书
优秀教导主任事迹材料
2014/05/09 职场文书
毕业生实习证明
2014/09/19 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
golang中字符串MD5生成方式总结
2021/07/04 Golang
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers