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

更新時間：2024年03月29日 14:36:27 作者：黑白獨行

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

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

vue運行時，提示

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

問題原因

未安裝postcss-loader autoprefixer。

執(zhí)行以下命令：

cnpm install postcss-loader autoprefixer postcss  -D

執(zhí)行成功，如果運行時還報以下錯誤：

PostCSS plugin autoprefixer requires PostCSS 8

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

執(zhí)行以下腳本：

cnpm install postcss-loader autoprefixer@8.0.0 postcss  -D

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

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

1、npm run serve 報錯

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

解決辦法：安裝npm

npm install

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

如果報錯，提示：cnpm : 無法加載文件 C:\Users\crGod\AppData\Roaming\npm\cnpm.ps1，因為在此系統(tǒng)上禁止運行腳本

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

以管理員身份運行 VSCODE

輸入

set-ExecutionPolicy RemoteSigned

再次

cnpm install

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

set-ExecutionPolicy : Windows PowerShell 已成功更新你的執(zhí)行策略，但在更具體的作業(yè)域中定義的策略覆蓋了該設(shè)置。由于發(fā)生覆蓋，你的外殼程序?qū)⒈Ａ羝洚?dāng)前的有效執(zhí)行策略 AllSigned。請
鍵入“Get-ExecutionPolicy -List”以查看你的執(zhí)行策略設(shè)置。有關(guān)詳細(xì)信息，請參閱“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報錯

npm ERR! missing script: dev

報錯原因：package.json 文件 script中找不到dev

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

解決方法有以下兩種：

1、運行npm run serve命令

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

調(diào)試方法：

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

{
  // 使用 IntelliSense 了解相關(guān)屬性。 
  // 懸停以查看現(xiàn)有屬性的描述。
  // 欲了解更多信息，請訪問: 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}"
      }
  ]
}

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

2、啟動項目

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

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