使用Nuxt重构已有Vue项目(Axios默认根域名、切换Vuetify字体、配置Mavon编辑器和常见异常解决localStorage/window/document is not defined)

最新推荐文章于 2024-09-18 17:28:45 发布
最新推荐文章于 2024-09-18 17:28:45 发布
阅读量6.9k 收藏 8
点赞数 1
分类专栏： 前端 文章标签： vue html seo nuxt nuxt.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Piconjo/article/details/106304926
版权
本文详细记录了使用Nuxt重构Vue项目的过程，包括Nuxt的基础概念、安装、改造步骤，特别是如何配置全局Axios默认根域名，切换Vuetify字体，解决localStorage/window/document未定义的异常。通过Nuxt实现SEO优化，提高网站流量。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

近日用Vue写了个小项目 但由于Vue的特性 导致项目的SEO并不是很好
因此用Nuxt重构了该项目 对项目进行了一次优化
由于之前并没有相关的经验 因此遇到不少的坑 特此记录一下

一、概念

什么是Nuxt

Nuxt.js是Vue.js的通用框架 常用来作服务器端渲染(Server Side Rendering 简称SSR)

Vue适合用于开发SPA单页面应用 但因其数据绑定特性 导致爬虫只能爬取页面模板 并不能爬到渲染好的数据 不利于网站排名

对于公司内部网站等不需要排名的网站 可以不用SEO
但对于那些博客或新闻网之类的网站 SEO可谓是至关重要 这直接关系到网站的流量

二、安装

关于Nuxt的安装 这里就不多赘述了 请参看我的另一篇博客：Nuxt的介绍及简单安装(vue-cli4.x)
Nuxt是开箱即用的模块化安装 安装是傻瓜式的 非常方便

三、改造

这是Vue项目的目录结构：
在这里插入图片描述
这是Nuxt项目的目录结构：
在这里插入图片描述
可以看出 Vue和Nuxt的项目目录是很相似的 因此可以很方便地对文件进行移植
关于Nuxt的目录结构的对应含义 我在此前的博客中已经有了相关的解答：Nuxt的目录结构和常用配置

那么 接下来就是愉快的移植了：

  • 【★】 Vue项目下的assets是静态文件 可以放入Nuxt项目下的static目录下
  • 【★】 Vue项目下的components是组件 直接放入Nuxt项目下的同名目录components下
  • 【★】 Nuxt项目下的layouts是布局文件 其中默认生成的default.vue是页面模板 相当于Vue项目下的App.vue
    里面有个<nuxt />代表了你的页面内容 相当于Vue的<router-view/> 在其上加上tabbar 在其下加上footer即可实现页面自定义页面模板
    error.vue是错误页面 这些都可以自己进行定制
  • 【★】 Vue项目的路由配置router/index.js就不需要了 因为Nuxt会自动生成 不过需要遵循Nuxt的相应的规则：Nuxt的路由(普通路由、动态路由、参数校验)和路由动画
  • 【★】 Vue项目的插件放在Nuxt项目的plugins目录下 给每个插件定义一个js文件进行配置
    例如过滤器 在plugins下定义一个filter.js即可：
import Vue from 'vue'
import Moment from 'moment'
Vue.filter('dateFormat',function(value,format='YYYY-MM-DD HH:mm:ss'){
   
    return Moment(value).format(format)
})

然后在nuxt.config.js里进行配置
忘了说了：nuxt.config.js是Nuxt项目的总配置文件 插件要在里面的plugins里导入才会生效
就比如刚才的过滤器：

plugins: [
    "~/plugins/filter.js",
  ],

(~和@是Nuxt的语法 都能表示项目的根目录)

  • 【★】 Vue项目下的store是Vuex的配置文件 直接放于Nuxt项目的同名store目录下 但有少许不同：
    在Vue项目下的store/index.js是这样的：
最低0.47元/天 解锁文章
nuxt重构vue项目
helloworld963的博客
11-25 1941
背景： 公司要求用nuxt重构vue项目，目的是为了服务端渲染ssr，提高加载速度，nuxt还可以实现seo优化，但是由于是后台管理项目，所以没用到这个功能。 改造的时候确实遇到很多坑，想过不用这个框架，自己配置ssr，由于自己配置ssr更复杂，所以硬着头皮改完了，现在总结一下遇到的问题，一来做完项目总结会有提升，二来可以方便他人，毕竟我自己也是看了别人的博客才得到灵感。 得到的经验： 1...
Vue2 项目重构为 nuxt.js 项目 axios 踩的坑
hebing2955的博客
10-24 941
个人网站：https://aijianli.site/ 可以免费在线制作简历，提供PDF下载，方便快捷。为了解决自己开发的简历制作网站爱简历的 SEO 问题 ,将前端 Vue 项目改造成 nuxt.js 项目。在此过程中axios的引用出现的问题困扰良久，差点放弃改造。以下记录下了问题解决的办法。
nuxt localStorage is not defined
海北军
08-20 5717
在vue create生命周期中用到localStorege(window也是)报了localStorage is not defined的错, 解决:在mounted生命周期中用localStorage
解决nuxt框架刷新页面报错localStorage is not defined问题
2301_79339277的博客
07-23 899
直接放到渲染后的函数里面就行了,但是会影响页面美观 会导致 图片各种东西排版一开始是乱的 等渲染完才会去赋值 我这个无所谓只是自己玩玩后面会改为服务器去动态。1.一般来说报这种错误就是 页面渲染完了 某个属性未定义但是却使用了 所以就会报错。2.我们这边使用的nuxt3框架 服务端渲染的 每次都是会报错。
angular：ERROR ReferenceError: localStorage is not defined
Cloud Flower的博客-专注unity
05-28 620
注意在可能使用localStorage 的地方，需要判断是Server环境返回默认值。使用localStorage时，ssr会报错。
Vue Nuxt.js 从LocalStorage读取数据报错
ardong16的博客
06-24 2301
1. 场景描述 在Nuxt.js中，适用axios从服务端获取数据data，为了优化本地访问速度，将data存储在locaStorage中。这样，当用户刷新页面是，优先加载本地数据，超过一定时限，删除本地data，再次从服务端获取。 实现代码如下： mounted () { // 加载函数 this.readOrCreateLocal() }, methods: { // 请求函数 queryAll () { const result = axios.get(
Vue.js 框架源码与进阶 - NuxtJS案例 - Realworld项目 - 项目初始化
时光海的博客
01-04 611
NuxtJS案例 - Realworld项目 - 项目初始化11.1 案例介绍案例相关资源11.2 项目初始化创建项目导入样式资源配置布局组件导入登录注册页面导入剩余页面处理顶部导航链接处理导航链接高亮封装请求模块 11.1 案例介绍 案例相关资源 GitHub仓库：https://github.com/gothinkster/realworld 在线示例：https://demo.realworld.io/#/ 接口文档：https://github.com/gothinkster/realworld
Vue 2.x脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)
CRPER
11-07 1万+
前言文章内容覆盖范围,芝麻绿豆的破问题都有,不止于vue; 给出的是方案,但不是手把手一字一句的给你说十万个为什么!有三类人不适合此篇文章: “喜欢站在道德制高点的圣母婊” – 适合去教堂 “无理取闹的键盘侠” – 国际新闻版块欢迎你去 “有一定基础但又喜欢逼逼的人” 得得得,老子知道你厉害了,你好牛逼,这些问题那么简单,都是小白看的 这种傻瓜文,简直浪费老子的时间! 对于以上三类人,走吧,这里
Next.js ReferenceError: localStorage is not defined
宏斌的博客
08-28 1963
axios.interceptors.request.use((config: AxiosRequestConfig) => { if (typeof window !== "undefined") { config.headers.Authorization = getLocalJWT(); } return config; });
nuxt-vuex-localstorage
05-05
nuxt-vuex-本地存储 通过连接Vuex和Web存储，可以更有效地利用本地存储和会话存储。 与其他持久性插件不同，通过仅分配Vuex的某些特定对象，Web存储可以节省更多空间，并且还可以与现有Vuex用法一起使用。 通过本地存储的数据绑定可以在多个浏览器选项卡中轻松管理。 它具有强大的数据加密功能，因此可提供各种Web存储安全系统。 它提供Web存储不支持的“ expire”功能。 对于某些不支持Web存储的环境，它支持“ cookie模式”，例如“ Safari私有模式”。 它在电子中效果很好！ 自述翻译 링크： : 例子 安装 npm i nuxt-vuex-localstorage 默认（自动）模式 最基本的步骤，其中本地存储被自动加密。 // nuxt.config.js module . exports = { modules : [ &#39;nuxt
使用 Nuxt 重构 Vue-cli 项目，我悟了
qq_44765926的博客
07-04 887
产品说： • 在后台修改 SEO后 为什么在检查源代码的时候还是之前的 SEO？ • 而且其他界面为什么没有 SEO？ • 不能动态的吗？ • （我真是 栓Q 了）
Angular 服务器端渲染应用的一个错误消息 type ReferenceError - localStorage is not defined
Web_boom的博客
07-29 426
只需从AppServerModule的providers中添加来自@ng-web-apis/universal包的UNIVERSAL_LOCAL_STORAGE，并通过令牌LOCAL_STORAGE，这样就能获得服务器的localStorage实现。例如，在服务器端渲染模式下，开发人员不能像在客户端渲染环境下那样，直接访问全局文档对象。不要通过全局空间使用浏览器API，而是通过DI来替换或禁用浏览器实现，以便在服务器上安全使用这些API.额外的属性已从组件中移除。...
nuxt.js 进行项目重构-配置事件总线、底部tabbar、better-scroll
benlalagang的博客
10-24 2018
nuxt.js 进行项目重构-配置事件总线、底部tabbar、better-scroll、运用到首页
localStorage is not defined的解决方案
wy_Blog的博客
09-12 2万+
localStorage.setItem('id_token', JSON.parse(response.data)) 报错： http://eslint.org/docs/rules/no-undef 'localStorage' is not defined localStorage.setItem('id_token', JSON.parse(response.data)) ^
Error in mounted hook: "ReferenceError: localStorage is not defined"的解决方案
热门推荐
HermitSun的博客
05-08 3万+
先说说问题背景。首先Vue肯定是没跑了，在这个项目中，我没有使用传统（也更加熟悉）的JavaScript，而是使用了TypeScript，同时引入了Mocha+Chai，结合官方推出的Vue Test Utils进行单元测试。Vue Test Utils好用是好用，但可能是因为还没有完全成熟，坑还是挺多的。回头写一篇介绍一下我的一些踩坑经验。 进入正题。首先引入dom-storage这个包，然后创...
vuepress打包报错 localStorage is not defined
qq_30351747的博客
06-17 769
vuepress打包报错 localStorage is not defined
NUXT3项目二开开启SSR后报错localStorege(window) is not defined解决方案
lmn_storyteller的博客
09-18 348
写项目的时候要求在二开项目上开启ssr，配置开启后一直报错window（localStorege、document） is not defined ,多方搜索有人说:在mounted生命周期中用。由于 nextjs 是服务端渲染,它会预渲染页面后生成 HTML，然后再将其发送给客户端，因此在渲染时无法识别 window/document 浏览器的对象方法。: 这段代码检查当前环境是否为客户端（即在浏览器中）。就可以了，但是主体没有解决，大部分是操作dom的问题。对）只能在客户端运行。
react 服务器端渲染 ssr 中 localstorage/history/window is not defined 解决方案
小结巴巴的博客
09-18 3241
&#13;  &#13; 1、原因&#13; 　　&#13;  　ssr 会在后端执行组件的 componentWillMount 以及在它这个生命周期之前的生命周期&#13;     也就是说 ssr 阶段是不会执行 componentDidMount 方法的&#13;  &#13; 　当你在 componentWillMount 之前当生命周期里面调用 window / ...
vue axios使用请求头
最新发布
03-13
<think>好的，我需要帮助用户在Vue项目中使用Axios发送带有自定义请求头的HTTP请求。首先，我得回忆一下Axios的基本用法以及如何在Vue中集成它。根据引用[3]和[4]，用户可能需要先安装Axios并创建实例，然后配置拦截器来添加请求头。 步骤一，安装Axios应该是必要的，用户需要运行npm install axios或者yarn add axios。然后，在项目中创建一个单独的配置文件，比如request.js，用来封装Axios实例。这里，引用[3]中的代码示例展示了如何创建实例并设置baseURL和超时时间，这是一个好的开始。 接下来，用户需要添加请求拦截器来设置自定义请求头。引用[2]提到在vue-resource中使用拦截器设置头信息，但用户现在用的是Axios，所以需要调整。Axios的拦截器配置应该放在instance.interceptors.request.use里，这样每次发送请求前都会自动添加所需的头信息。例如，在config.headers中添加Authorization或者其他的自定义字段。 然后，用户可能需要导出这个配置好的实例，并在具体的API文件中引入，如引用[4]所示。这样，每个API请求都可以通过这个实例发送，确保请求头被正确添加。 另外，用户可能需要处理不同内容的请求，比如JSON或表单数据，这时需要设置Content-Type头。例如，如果是上传文件，可能需要multipart/form-data类型，这时候在拦截器中动态设置Content-Type可能更合适。 还需要提醒用户关于安全性的问题，比如将敏感信息如token存储在Vuex或本地存储中，而不是硬编码在请求头里。同时，处理可能的错误，比如认证失败时的响应拦截，引用[3]中的响应拦截示例可以扩展来处理这些情况。 最后，给出一个完整的示例代码会帮助用户更好地理解如何整合这些步骤。需要确保代码中的拦截器正确返回config，并且导出实例供其他模块使用。同时，演示如何在实际组件中调用封装好的API方法，比如登录接口，这样用户可以看到整个流程是如何运作的。 可能还需要提及常见的坑，比如CORS问题，服务器是否需要预检请求（OPTIONS），这时候确保服务器允许自定义头信息。此外，测试请求是否成功携带头部，可以使用浏览器开发者工具的网络选项卡进行检查。 总结一下，步骤应该是：安装Axios -> 创建实例并配置拦截器 -> 在拦截器中设置请求头 -> 导出实例并在API模块中使用 -> 在组件中调用API。同时，注意安全性和错误处理，以及必要的服务器端配置。</think>### 如何在 Vue 中使用 Axios 发送带自定义请求头的 HTTP 请求 以下是分步教程，结合代码示例和引用内容说明具体实现方法： --- #### **1. 安装 Axios** 在项目中安装 Axios： ```bash npm install axios # 或 yarn add axios ``` --- #### **2. 创建 Axios 实例并配置请求头** 在 `src/utils/request.js` 中创建自定义 Axios 实例，并通过拦截器添加请求头： ```javascript import axios from &#39;axios&#39;; // 创建实例 const instance = axios.create({ baseURL: &#39;http://api.example.com&#39;, // 设置基础URL timeout: 5000, // 超时时间 }); // 请求拦截器：添加自定义请求头 instance.interceptors.request.use( (config) => { // 添加通用请求头，例如认证 Token config.headers[&#39;Authorization&#39;] = &#39;Bearer your_token_here&#39;; // 从 Vuex 或 localStorage 获取更安全 // 添加其他自定义头（如 Content-Type） config.headers[&#39;Content-Type&#39;] = &#39;application/json&#39;; // 根据需求调整 return config; }, (error) => { return Promise.reject(error); } ); // 响应拦截器（可选） instance.interceptors.response.use( (response) => { return response.data; // 直接返回数据部分 }, (error) => { console.error(&#39;请求失败:&#39;, error); return Promise.reject(error); } ); export default instance; ``` **说明**： - 通过 `interceptors.request.use` 动态添加请求头，适用于全局配置[^3]。 - `Authorization` 和 `Content-Type` 是常见示例，可根据需求替换为其他字段。 --- #### **3. 在 API 模块中使用实例** 创建 `src/api/user.js` 定义具体接口： ```javascript import request from &#39;@/utils/request&#39;; // 示例：登录接口 export function login(data) { return request({ url: &#39;/login&#39;, method: &#39;post&#39;, data, // POST 请求体 headers: { &#39;X-Custom-Header&#39;: &#39;value&#39; // 接口级自定义头（覆盖全局配置） } }); } ``` **说明**： - 在接口中可单独设置请求头，优先级高于全局拦截器[^4]。 --- #### **4. 在 Vue 组件中调用** 在组件中导入 API 并发送请求： ```javascript import { login } from &#39;@/api/user&#39;; export default { methods: { async handleLogin() { try { const response = await login({ username: &#39;admin&#39;, password: &#39;123&#39; }); console.log(&#39;登录成功:&#39;, response); } catch (error) { console.error(&#39;登录失败:&#39;, error); } } } } ``` --- #### **5. 关键注意事项** 1. **动态 Token**： 避免硬编码 Token，建议从 Vuex 或 `localStorage` 获取： ```javascript config.headers[&#39;Authorization&#39;] = `Bearer ${store.state.token}`; ``` 2. **Content-Type 适配**： - 上传文件时需设置为 `multipart/form-data`： ```javascript config.headers[&#39;Content-Type&#39;] = &#39;multipart/form-data&#39;; ``` - 表单提交可使用 `application/x-www-form-urlencoded`。 3. **跨域问题 (CORS)**： 确保后端允许自定义头（如 `Authorization`），需配置： ```http Access-Control-Allow-Headers: Authorization, X-Custom-Header ``` --- ### 示例效果验证 通过浏览器开发者工具的 **Network** 选项卡，检查请求头是否包含自定义字段： ![示例请求头截图](https://via.placeholder.com/800x200?text=Headers+Including+Authorization+and+X-Custom-Header) --- ### 相关问题 1. **如何避免 Axios 请求头被缓存？** （提示：可添加 `Cache-Control: no-cache` 或时间戳参数） 2. **Axios 如何取消重复请求？** （提示：使用 `CancelToken` 或 AbortController） 3. **怎样在 Nuxt.js 中集成 Axios 并配置拦截器？** （参考：Nuxt Axios 模块的 `onRequest` 钩子）[^4]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值