Nuxt问题合集

目录

1.背景

2.环境

3.问题集

1）安装Nuxt

2）vue-cli的安装

3）报错：npm ERR! cb() never called!

4）报错：Unknown custom element: 

5）使用swiper时设置样式

6）Nuxt配置外部访问

---

1.背景

初次使用nuxt，遇到不少坑，虽然不完全懂这些坑背后的原因，但也算了解了一点皮毛，至少解决了表面的问题，也记录一下，望网友指点~~

2.环境

工具/插件	版本
vue	@vue/cli 4.5.14
npx/ npm	6.14.12
vue-awesome-swiper	3.1.3
swiper	4.5.1

3.问题集

1）安装Nuxt

旧版本的方式参考：GitHub - nuxt-community/starter-template: DEPRECATED: use create-nuxt-app instead

使用新版本的话，稍微有些改动：

GitHub - nuxt/create-nuxt-app: Create Nuxt.js App in seconds.

参考：

create-nuxt-app 新版本v3.1.0安装选项变化_lamanchas的博客-CSDN博客

Nuxt项目的安装和使用_li13429743580的博客-CSDN博客

2）vue-cli的安装

这里在安装nuxt时，遇到安装不成功，或者安装成功了，但是部分插件下载的版本老旧，甚至下载不下来的情况。也不知道是代理、镜像还是npx的版本原因，但至少，更换了vue-clie和npx的版本后，nuxt的新版本能顺利安装了。

旧版本的vue-cli安装：

npm install "@vue/cli" --save-dev

这里也遇到了报错：源文本中存在无法识别的标记。。。。。。

npm安装报错：源文本中存在无法识别的标记_Zhang's Blog-CSDN博客

https://www.cnblogs.com/xiaonian8/p/13714274.html

3）报错：npm ERR! cb() never called!

首先，“以管理员身份”打开cmd；

其次，执行命令清楚npm缓存

npm cache clean -f

最后，安装npm的稳定版本

npm install -g n --force

4）报错：Unknown custom element: <swiper>

一开始遇到这个问题，在网上四处搜索，按提示安装swiper@5.2.0，引入方式有误等等，结果杂乱无章，轮播图的效果还是没有出来，F12查看还是报上述错误。

原因：实际上，是由于vue-awesome-swiper和swiper之间的版本不匹配。vue-awesome-swiper@3.X对应swiper@4.0版本，因为一开始使用npm install vue-awesome-swiper只会自动安装版本，一定不要这样用！！！~~~~

正确的安装姿势是：

npm install vue-awesome-swiper@3.1.3
npm install swiper@4.5.1

然后在plugins目录下新建nuxt-swiper.js文件在nuxt.config.js中引入

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import "swiper/dist/css/swiper.css";

Vue.use(VueAwesomeSwiper);

最后，在nuxt.config.js中做如下引入：

css:[
  { src: "swiper/dist/css/swiper.css" }
],
plugins:[
  { src: "~/plugins/vue-swiper.js", ssr: false },
]

参考：

vue默认安装vue-awesome-swiper版本，避坑指南_hl807092862的博客-CSDN博客_vue-awesome-swiper版本

vue项目中使用轮播组件vue-awesome-swiper安装最新版本爬坑记_JackieDYH的博客-CSDN博客

在nuxt中使用vue-awesome-swiper - 童话里都是骗人的 - 博客园

5）使用swiper时设置样式

实际这里是:style的使用

<swiper ref="mySwiper">
    <swiper-slide 
     v-for="(item, index) in swiperList"
     :key="index"
     :style="{ backgourndImage: 'url(' + item.imgUrl + ')', backgroundPosition: 'center center', backgroundSize: 'cover'}"
    >
    </swiper-slide>    
</swiper>

参考：

Vue 使用:style 内联样式设置背景样式_无Bug说的博客-CSDN博客

vue引入vue-awesome-swiper_好气嗷，但仍要保持微笑!-CSDN博客

6）Nuxt配置外部访问

参考：nuxt部署在Linux下，ip+端口无法访问到_山海皆可平，难平是人心的博客-CSDN博客