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 相关文章推荐
由document.body和document.documentElement想到的
Apr 13 Javascript
javascript 多浏览器 事件大全
Mar 23 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
Oct 21 Javascript
jquery 插件学习(二)
Aug 06 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
Jquery轮播效果实现过程解析
Mar 30 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
js轮播图的插件化封装详解
Jul 17 Javascript
Angular 1.x个人使用的经验小结
Jul 19 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
微信小程序实现轮播图指示器
Jun 25 Javascript
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 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
PHP处理JSON字符串key缺少双引号的解决方法
2014/09/16 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
KnockoutJs快速入门教程
2016/05/16 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
详解Angular 4.x Injector
2017/05/04 Javascript
js常见遍历操作小结
2019/06/06 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
python进阶教程之模块(module)介绍
2014/08/30 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
python用pickle模块实现“增删改查”的简易功能
2017/06/07 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法
2019/07/04 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
软件测试面试题
2015/10/21 面试题
品质主管的岗位职责
2013/12/04 职场文书
大学自我鉴定范文
2013/12/26 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
骨干教师个人总结
2015/02/11 职场文书
同意离婚答辩状
2015/05/22 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
教师远程研修感悟
2015/11/18 职场文书
小学班主任心得体会
2016/01/07 职场文书
导游词之昭君岛
2020/01/17 职场文书
python - asyncio异步编程
2021/04/06 Python
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python