以解決Module not found: Error: Can't resolve 'vue-awesome-swiper/dist/ssr'或 vue中使用swiper出現Can't resolve 'swiper/dist/css/swiper.css'

錯誤提示有多種，但我遇見的基本就這一個原因造成的。

不成功的解決方式

不知道什么原因，開始swiper文件並沒自動安裝上。

安裝swiper：

npm install swiper vue-awesome-swiper --save

然而在\node_modules\swiper里面會發現沒有dist目錄，所以出現這個錯。又嘗試過在swiper文件夾下創建dist，但並沒有解決問題。

 

成功的解決方式

 

報錯如下：

單擊第一個路徑可以調整到App.js

下面CSS的路徑一點反應沒有

 

 

 

 

報錯提示

ERROR in ./plugins/nuxt-swiper-plugin.js Module not found: Error: Can't resolve 'vue-awesome-swiper/dist/ssr' in 'D:\****\guili_vue\vue-admin-front-nuxt\plugins'

 

 

報錯提示

vue中使用swiper出現Can't resolve 'swiper/dist/css/swiper.css'

這些都是一個原因——版本問題

我的更改如下：

1. 修改nuxt.config.js如下：

module.exports = {
  plugins: [
    { src: '~/plugins/nuxt-swiper-plugin.js', ssr: false }
  ],

  css: [
    'swiper/swiper-bundle.css'
  ],

2. 修改nuxt-swiper-plugin.js如下：

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/vue-awesome-swiper.js'

Vue.use(VueAwesomeSwiper)

 

然后執行npm run dev

 

 

 

成功了

 

 加上輪播圖的時候出現了問題

輪播圖不能跳轉了，后來發現是swiper版本的問題。

在package.jason中改swiper版本為3.1.3

  "dependencies": {
    "nuxt": "^2.0.0",
    "vue-awesome-swiper": "^3.1.3"
  },

然后去node_modules 中把vue-awesome-swiper這個文件夾刪掉。

下載 vue-awesome-swiper@3.1.3

cnpm install vue-awesome-swiper@3.1.3 --save

我使用 npm install vue-awesome-swiper@3.1.3 --save 無法安裝成功

 

CSS路徑不變

  css: [
    'swiper/swiper-bundle.css'
  ],

 

成功了

 

 

其它報錯提示解決方法

問題：

'nuxt' 不是內部或外部命令，也不是可運行的程序 或批處理文件。

方法：

如果按着官網創建完nuxt項目之后 運行npm run dev 出現 'nuxt' 不是內部或外部命令，也不是可運行的程序 或批處理文件。
那就在 npm install 一下