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 15 Javascript
JavaScript生成GUID的多种算法小结
Aug 18 Javascript
js+jquery常用知识点汇总
Mar 03 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 Javascript
js编写一个简单的产品放大效果代码
Jun 27 Javascript
Bootstrap缩略图与警告框学习使用
Feb 08 Javascript
监听element-ui table滚动事件的方法
Mar 26 Javascript
JavaScript变速动画函数封装添加任意多个属性
Apr 03 Javascript
理理Vue细节(推荐)
Apr 16 Javascript
微信小程序云开发实现云数据库读写权限
May 17 Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 Javascript
JavaScript 实现轮播图特效的示例
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
一些花式咖啡的配方
2021/03/03 冲泡冲煮
用libtemplate实现静态网页生成
2006/10/09 PHP
PHP调用三种数据库的方法(2)
2006/10/09 PHP
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
微信自定义分享php代码分析
2016/11/24 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
gulp解决跨域的配置文件问题
2017/06/08 Javascript
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
vue中使用input[type="file"]实现文件上传功能
2018/09/10 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
2018/09/30 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
vue移动端模态框(可传参)的实现
2019/11/20 Javascript
python3监控CentOS磁盘空间脚本
2018/06/21 Python
django-filter和普通查询的例子
2019/08/12 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
Python 虚拟环境工作原理解析
2020/12/24 Python
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
大学应届毕业生个人求职信
2013/09/23 职场文书
大学学习生活感言
2014/01/18 职场文书
公司任命书模板
2014/06/06 职场文书
2014年生产部工作总结
2014/12/17 职场文书
中秋节慰问信
2015/02/15 职场文书
运动会表扬稿范文
2015/05/05 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书
Python 数据可视化之Seaborn详解
2021/11/02 Python
vue实现移动端div拖动效果
2022/03/03 Vue.js