解决Vue Loading PostCSS Plugin failed:Cannot find module autoprefixer问题

2024-04-18 0 393
目录
  • 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 字符: 1set-ExecutionPolicy RemoteSignedCategoryInfo : PermissionDenied: ( [Set-ExecutionPolicy], SecurityExceptionFullyQualifiedErrorId : 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 Loading PostCSS Plugin failed:Cannot find module autoprefixer问题

    vue-cli3运行项目的命令是npm run serve,和以前的命令npm run dev不一样,但最后执行的都是 vue-cli-service serve

    解决方法有以下两种:

    1、运行npm run serve命令

    2、将 script中找不到serve 改成 dev,如下图

    解决Vue Loading PostCSS Plugin failed:Cannot find module autoprefixer问题

    调试方法:

    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中调试代码

    总结

    以上为个人经验,希望能给大家一个参考,也希望大家多多支持悠久资源网。

    您可能感兴趣的文章:

    • vue3+vite使用postcss-pxtorem、autoprefixer自适应和自动添加前缀
    • vue3成功创建项目后 run serve启动项目报错的解决
    • 解决vue2使用脚手架配置prettier报错prettier/prettier:context.getPhysicalFilenameisnotafunction
    • vue3配置Element及element-plus/lib/theme-chalk/index.css报错的解决
    • vue项目使用可选链操作符编译报错问题及解决

    收藏 (0) 打赏

    感谢您的支持,我会继续努力的!

    打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
    点赞 (0)

    悠久资源 JavaScript 解决Vue Loading PostCSS Plugin failed:Cannot find module autoprefixer问题 https://www.u-9.cn/biancheng/javascript/186816.html

    常见问题

    相关文章

    发表评论
    暂无评论
    官方客服团队

    为您解决烦忧 - 24小时在线 专业服务