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给input和textarea设定ie中的focus
May 29 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
Javascript技术栈中的四种依赖注入小结
Feb 27 Javascript
js, jQuery实现全选、反选功能
Mar 08 Javascript
vue拦截器Vue.http.interceptors.push使用详解
Apr 22 Javascript
vue使用一些外部插件及样式的配置代码
Nov 18 Javascript
微信小程序8种数据通信的方式小结
Feb 03 Javascript
如何通过vscode运行调试javascript代码
Jul 24 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
Oct 30 Javascript
vue watch监控对象的简单方法示例
Jan 07 Vue.js
详解微信小程序(Taro)手动埋点和自动埋点的实现
Mar 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
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
jquery复选框checkbox实现删除前判断
2014/04/20 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
javascript单例模式的简单实现方法
2015/07/25 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
layui的layedit富文本赋值方法
2019/09/18 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
2021/02/25 Vue.js
python制作websocket服务器实例分享
2016/11/20 Python
Python操作Redis之设置key的过期时间实例代码
2018/01/25 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
PyTorch的自适应池化Adaptive Pooling实例
2020/01/03 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
业务员岗位职责范本
2013/12/15 职场文书
家长会演讲稿范文
2014/01/10 职场文书
导师工作推荐信范文
2014/05/17 职场文书
幼儿园感谢信
2015/01/21 职场文书
企业介绍信范文
2015/01/30 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
深度学习详解之初试机器学习
2021/04/14 Python
Golang 空map和未初始化map的注意事项说明
2021/04/29 Golang