解决VueLoadingPostCSSPluginfailed:Cannotfindmoduleautoprefixer问题，
解决VueLoadingPostCSSPluginfailed:Cannotfindmoduleautoprefixer问题，
目录
- Vue Loading PostCSS Plugin failed: Cannot find module‘autoprefixer’
- 问题原因
- vue开发常见问题及调试
- 1、npm run serve 报错
- 2、npm run dev报错
- 总结
Vue Loading PostCSS Plugin failed: Cannot find module‘autoprefixer’
vue运行时，提示
Vue Loading PostCSS Plugin failed: Cannot find module ‘autoprefixer’
问题原因
未安装postcss-loader autoprefixer。
执行以下命令：
cnpm install postcss-loader autoprefixer postcss -D
执行成功，如果运行时还报以下错误：
PostCSS plugin autoprefixer requires PostCSS 8
说明PostCSS 版本不对，需要指定版本执行
执行以下脚本：
cnpm install postcss-loader autoprefixer@8.0.0 postcss -D
执行成功，重新运行正常。
vue开发常见问题及调试
1、npm run serve 报错
‘vue-cli-service’ 不是内部或外部命令，也不是可运行的程序 或批处理文件。
解决办法：安装npm
npm install
如果你下载的淘宝镜像，也可以 cnpm install。
如果报错，提示：cnpm : 无法加载文件 C:\Users\crGod\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本
根据以下方法解决：
以管理员身份运行 VSCODE
- 输入
set-ExecutionPolicy RemoteSigned
- 再次
cnpm install
注：如果set-ExecutionPolicy RemoteSigned时出现如下错误：
set-ExecutionPolicy : Windows PowerShell 已成功更新你的执行策略，但在更具体的作业域中定义的策略覆盖了该设置。由于发生覆盖，你的外壳程序将保留其当前的有效执行策略 AllSigned。请
键入“Get-ExecutionPolicy -List”以查看你的执行策略设置。有关详细信息，请参阅“Get-Help Set-ExecutionPolicy”。
所在位置 行:1 字符: 1
set-ExecutionPolicy RemoteSigned
CategoryInfo : PermissionDenied: ( [Set-ExecutionPolicy], SecurityException
FullyQualifiedErrorId : ExecutionPolicyOverride,Microsoft.PowerShell.Commands.SetExecutionPolicyCommand
解决方法：
执行命令：
Set-ExecutionPolicy RemoteSigned -Scope Process
再重新执行
cnpm install
2、npm run dev报错
npm ERR! missing script: dev
报错原因：package.json 文件 script中找不到dev
vue-cli3运行项目的命令是npm run serve,和以前的命令npm run dev不一样，但最后执行的都是 vue-cli-service serve
解决方法有以下两种：
1、运行npm run serve命令
2、将 script中找不到serve 改成 dev，如下图
调试方法：
1、点击调试，选择 Chrome 环境，然后点击那个齿轮图标来配置、 launch.json，launch.jso内容如下：
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: 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设置的端口号一致
2、启动项目
打开终端，输入命令 npm run serve（或者 npm run dev）
3、设置断点，启动调试，即可在Chrome中调试代码
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持3672js教程。
您可能感兴趣的文章:- vue3+vite使用postcss-pxtorem、autoprefixer自适应和自动添加前缀
- vue3成功创建项目后 run serve启动项目报错的解决
- 解决vue2使用脚手架配置prettier报错prettier/prettier:context.getPhysicalFilename is not a function
- vue3配置Element及element-plus/lib/theme-chalk/index.css报错的解决
- vue项目使用可选链操作符编译报错问题及解决