快捷導(dǎo)航

解決Vue Loading PostCSS Plugin failed:Cannot find module autoprefixer問題

更新時(shí)間：2024年03月29日 14:36:27 作者：黑白獨(dú)行

這篇文章主要介紹了解決Vue Loading PostCSS Plugin failed:Cannot find module autoprefixer問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

Vue Loading PostCSS Plugin failed: Cannot find module‘autoprefixer’

vue運(yùn)行時(shí)，提示

Vue Loading PostCSS Plugin failed: Cannot find module ‘autoprefixer’

問題原因

未安裝postcss-loader autoprefixer。

執(zhí)行以下命令：

cnpm install postcss-loader autoprefixer postcss  -D

執(zhí)行成功，如果運(yùn)行時(shí)還報(bào)以下錯(cuò)誤：

PostCSS plugin autoprefixer requires PostCSS 8

說明PostCSS 版本不對(duì)，需要指定版本執(zhí)行

執(zhí)行以下腳本：

cnpm install postcss-loader autoprefixer@8.0.0 postcss  -D

執(zhí)行成功，重新運(yùn)行正常。

vue開發(fā)常見問題及調(diào)試

1、npm run serve 報(bào)錯(cuò)

‘vue-cli-service’ 不是內(nèi)部或外部命令，也不是可運(yùn)行的程序或批處理文件。

解決辦法：安裝npm

npm install

如果你下載的淘寶鏡像，也可以 cnpm install。

如果報(bào)錯(cuò)，提示：cnpm : 無法加載文件 C:\Users\crGod\AppData\Roaming\npm\cnpm.ps1，因?yàn)樵诖讼到y(tǒng)上禁止運(yùn)行腳本

根據(jù)以下方法解決：

以管理員身份運(yùn)行 VSCODE

輸入

set-ExecutionPolicy RemoteSigned

再次

cnpm install

注：如果set-ExecutionPolicy RemoteSigned時(shí)出現(xiàn)如下錯(cuò)誤：

set-ExecutionPolicy : Windows PowerShell 已成功更新你的執(zhí)行策略，但在更具體的作業(yè)域中定義的策略覆蓋了該設(shè)置。由于發(fā)生覆蓋，你的外殼程序?qū)⒈Ａ羝洚?dāng)前的有效執(zhí)行策略 AllSigned。請(qǐng)
鍵入“Get-ExecutionPolicy -List”以查看你的執(zhí)行策略設(shè)置。有關(guān)詳細(xì)信息，請(qǐng)參閱“Get-Help Set-ExecutionPolicy”。
所在位置行:1 字符: 1
set-ExecutionPolicy RemoteSigned
CategoryInfo : PermissionDenied: ( [Set-ExecutionPolicy], SecurityException
FullyQualifiedErrorId : ExecutionPolicyOverride,Microsoft.PowerShell.Commands.SetExecutionPolicyCommand

解決方法：

執(zhí)行命令：

Set-ExecutionPolicy RemoteSigned -Scope Process

再重新執(zhí)行

cnpm install

2、npm run dev報(bào)錯(cuò)

npm ERR! missing script: dev

報(bào)錯(cuò)原因：package.json 文件 script中找不到dev

vue-cli3運(yùn)行項(xiàng)目的命令是npm run serve,和以前的命令npm run dev不一樣，但最后執(zhí)行的都是 vue-cli-service serve

解決方法有以下兩種：

1、運(yùn)行npm run serve命令

2、將 script中找不到serve 改成 dev，如下圖

調(diào)試方法：

1、點(diǎn)擊調(diào)試，選擇 Chrome 環(huán)境，然后點(diǎn)擊那個(gè)齒輪圖標(biāo)來配置、 launch.json，launch.jso內(nèi)容如下：

{
  // 使用 IntelliSense 了解相關(guān)屬性。 
  // 懸停以查看現(xiàn)有屬性的描述。
  // 欲了解更多信息，請(qǐng)?jiān)L問: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
      
      {
          "type": "chrome",
          "request": "launch",
          "name": "Launch Chrome",
          "url": "http://localhost:3000",
          "webRoot": "${workspaceFolder}"
      }
  ]
}

注：這里的端口好，需和項(xiàng)目config設(shè)置的端口號(hào)一致

2、啟動(dòng)項(xiàng)目

打開終端，輸入命令 npm run serve（或者 npm run dev）

3、設(shè)置斷點(diǎn)，啟動(dòng)調(diào)試，即可在Chrome中調(diào)試代碼