初次使用webstrom简单创建vue项目的一些报错记录

最新推荐文章于 2024-12-12 15:36:17 发布
原创 最新推荐文章于 2024-12-12 15:36:17 发布 · 1.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #webpack #webstorm #javascript

本文记录了在WebStorm中使用Webpack创建Vue项目时遇到的常见问题及解决方案，包括打包命令错误、mode模式报错、图片处理报错以及webpack.config.js配置错误。通过管理员权限运行WebStorm，正确设置mode模式，处理图片加载，以及修正webpack配置，解决了项目构建过程中的问题。

我的目录层级：工作文件夹为webpackedit，我这里只做简单依赖打包处理，src目录下的main.js引入mathUtil.js文件，将内容展示在index.html界面上，打包main.js后文件为dist目录下的main.js文件：

  1.  使用webpack打包时报错无法加载文件（按理说这个命令执行后会生成bundle.js文件但是我生成的总是main.js，不过后期当我后面配置好webpack.config.js文件后就直接生成了：

     解决方法：使用管理员打开wenstrom在工作目录终端依次输入以下命令即可

  2. 可以打包但是关于mode报错:

     解决方法：这个mode是提示我们选择开发(development)或者生产模式(production)的打包方式，为了便于阅读打包文件的内容我这里使用了开发模式打包方式，当我们打包文件的时使用命令 ：入口文件路径（也就是你要打包的文件） -o  打包文件路径  --mode-devlopmen

最低0.47元/天 解锁文章
lamuleimu
关注
vue3新创建项目启动报错，如何解决？
**My Coding Family**
01-16 1379
删除和，重新安装依赖。确保 Node.js 版本符合要求，建议使用 LTS 版本。尝试重新创建项目。查看具体的报错信息，定位问题。如果依然无法解决问题，提供具体的错误信息可能有助于进一步分析问题。希望如上措施及解决方案能够帮到有需要的你。PS：如若遇到采纳如下方案还是未解决的同学，希望不要抱怨&&急躁，毕竟影响因素众多，我写出来也是希望能够尽最大努力帮助到同类似问题的小伙伴，即把你未解决或者产生新Bug黏贴在评论区，我们大家一起来努力，一起帮你看看，可以不咯。
webstorm新建vue项目相关问题
zwrlj527的专栏
05-25 1310
1、建项目就这么简单，也就是会遇到这些事而已2、说webstorm不支持微信小程序开发的朋友，安装Uniapp Support试试3、对我难的不是vue的语法，而是画页面、样式，以前出H5还用jQuery的时候，就是烦页面、样式。好了，后端人就唠叨叨这里，希望能帮到大家，uping！
WebStorm软件自动创建Vue项目出现：Error: error:0308010C:digital envelope routines::unsupported问题的解决方案
qq_73519953的博客
12-06 860
看了好多帖子，终端运行时可以用，但是在用WebStorm自动创建Vue的项目时，点绿色run来进行npm run serve会报错，前面我搜索了帖子，在终端时可以用 #windows系统set NODE_OPTIONS=--openssl-legacy-provider这个来解决，这里就又不行了（也不是说不行，就是想用WebStorm运行不了，在终端上启动项目，是可以用上面的命令的，但是这不麻烦吗。），搜索了好多答案，我是这样解决了的，发出来给和我遇到相同问题的伙伴，修改package.json，找到上面的
关于webstorm新建vue工程报错
qq_40209717的博客
11-20 2084
新建vue项目出现如下错误 Error: Can not install ‘ij-rpc-client’: npm ERR! Unexpected end of JSON input… 1.更换npm源为国内淘宝镜像 npm config set registry http://registry.npm.taobao.org/ 2.cmd下全局安装 ij-rpc-client包：npm insta...
解决webstorm创建vue项目报错
xuanwoa的博客
07-12 1822
解决webstorm创建vue项目报错： 报错如下： 0 info it worked if it ends with ok 1 verbose cli [ 1 verbose cli 'D:\\Work Programs\\node\\node.exe', 1 verbose cli 'D:\\Work Programs\\node\\node_modules\\npm\\bin\\npm-cli.js', 1 verbose cli 'install', 1 verbose cli
2021-10-22 解决Webstorm创建Vue项目报错command failed: npm install --loglevel error
weixin_43643765的博客
10-22 879
用管理员身份运行cmd 输入 npm install npm@6.14.10 -g 上次创建项目还是好好的，这次忽然就报错了，报错截图忘记保存了，最后一句报错便是标题，看了别人写的博客，试了一下，还真的是这个问题。 npm版本太高，我记得我没有升级npm倒是升级过vue-cli，算了解决了就好。 ...
webstrom Debug 调试vue项目的方法步骤
10-18
下面是使用WebStorm进行Vue项目调试的一些详细步骤和知识点。 1. 安装和配置WebStorm 首先，确保你的系统上已经安装了WebStorm。如果还没有安装，可以从JetBrains官网下载并安装。安装完成后，配置好WebStorm，包括...
Vue入门到精通：解决使用Vue CLI创建Vue项目时出现的报错
衍生星球的博客
12-12 593
1.Win+R键打开运行面板 -> 输入Powershell -> 同时按下Ctrl+Shift+Enter键。3.使用 Get-ExecutionPolicy 命令查看状态，结果是​​Restricted​​，受限制。4.使用​​ set-ExecutionPolicy RemoteSigned ​​​命令解除限制。2.在弹出的管理员模式下的Powershell里面运行vue -v，弹出下面报错信息。1.使用Vue CLI创建Vue项目时出现报错信息。3.使用 vue-v 检查，报错。
Vue项目报错：Uncaught SyntaxError: Unexpected token <
10-17
主要介绍了Vue项目报错：Uncaught SyntaxError: Unexpected token <，在引入第三方依赖的 JS 文件时，遇到的一个问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webstorm 无法创建vue项目，报npm ERR! code EPERM,报-4048错误
MengKun822的博客
03-24 2448
这里写自定义目录标题webstorm 无法创建vue项目，报npm ERR! code EPERM,报-4048错误 webstorm 无法创建vue项目，报npm ERR! code EPERM,报-4048错误 解决办法：将webstorm关闭，然后点击webstorm快捷键，右键使用管理员身份运行，这样就可以解决报错问题了。 ...
webstorm2019版本创建VUE项目
01-20
前言 在论坛里发现有小伙伴使用2019版本的webstorm创建VUE项目的时候失败了，突然一想我也是2019的，后来没创建过，于是我就试了一下，如图： 啊哈 什么东西，稀奇古怪的错误 不管他，先运行下试试看啥结果 哦豁，很敏感的字眼，no such file or directory, open ‘E:\untitled2\package.json’ npm ERR! enoent This is related to npm not being able to find a file. 再加上看了下目录缺点什么是不发现没有node_modules文件夹还有package.json配
【IDEA/WebStorm运行Vue项目报错】
qq_45278500的博客
12-01 2516
使用IDEA或者WebStorm运行Vue项目时，解决代码爆红问题
webstorm无法创建vue类型文件
Distance的博客
12-24 3154
打开setting搜索plugins然后搜索vue settings中搜索File and Code Templates 其中需要添加的模块代码 <template> #[[$END$]]# </template> <script> export default { name: "${COMPONENT_NAME}" } </script> ...
webstorm如何创建 vue文件？
sinat_37328421的博客
01-18 6052
我们使用webstorm去做一个vue项目的时候，肯定需要建一个 .vue文件。我们会发现 如果我们手动建了 test.vue文件的时候，webstorm的自动补全标签功能不能用，es6语法报错的问题。这时我们应该设置webstorm 可以创建一个 vue文件，并且创建出来就有自己想要的模板。 1.让webstorm支持es6语法 2.让webstorm 可以创建Vue文件。记得重启
Install for [ ‘@vitejs/create-app@latest‘ ] failed with code 1
weixin_44440116的博客
07-20 1672
使用命令行npm init @vitejs/app新建vite2.x项目报错 Install for [ '@vitejs/create-app@latest' ] failed with code 1 解决： 使用管理员权限，打开命令行窗口，然后输入 cmd /c 你的用户名/J "C:\Users\你的用户名" "C:\Users\Mike Shi" npm config set cache C:\Users\你的用户名\AppData\Roaming\npm-cache npm config set
vue3导入导出
weixin_44368048的博客
03-24 4484
vue3+ts封装导入、导出、上传文件组件以及hooks自动化函数
webstom找不到vue全局组件
寿春
02-21 1756
但是这个只能自定义标签，不可能一个个配置，肯定是保留在vue里面的node——model里面所以我放弃了，我觉得只要引入就好了，百度了三个小时。所以我认为是这样，vue的文件是可以导入的，是因为在script 标签里面，相同的自动导入组件应该也是进来了，不然项目会报错，但是项目没有，所以一定是webstom的问题，于是我去目录里面去挂靠。直接说重点，既然是webstom的问题，我觉得我应该去官网看看，然后找了一个多小时，看到了这个。我尝试了不添加组件，进行编译，编译器中我也引入了这两个生成的自动导入文件。
Vue3 框架使用报错以及解决办法
热门推荐
chenacxz的博客
08-20 1万+
el-submenu,但是显示出了问题，不能正常显示。感觉是这个组件的问题，查了一圈没找到解决方法，最后看官方文档发现el-submenu变成了el-sub-menu。7、vue.config.ts import path from 'path' 配置报错。8、vue3+element-plus里面的el-submenu组件显示问题。4、yarn add element-plus --save报错。引入组件时，没有添加.vue后缀 或者引入的组建没有被使用。3、cnpm安装element-plus报错。..
vue3中遇到的问题
大灰狼的小绵羊哥哥的博客
08-18 4901
分享 15 个比较常见的问题，基本都贴出对应文档地址，还请多看文档~ 因此主要分几个方面总结：
创建Vue项目时报错创建Vue项目时报错
最新发布
01-18
### 创建 Vue 项目时报错解决方案 当使用 `vue-cli` 创建基于 "webpack" 模板的新项目时，可能会遇到各种错误。以下是针对不同情况的具体处理方法： #### 卸载并重新安装 vue-cli 如果使用的 Vue CLI 版本较老或存在冲突，可以尝试先卸载再安装最新版的 `vue-cli`[^4]: ```bash npm uninstall -g vue-cli npm install -g @vue/cli ``` 对于特定版本的需求，则可以通过命令指定版本号来完成安装： ```bash npm install -g vue-cli@<version> ``` #### 更新 npm 和 node.js 到最新稳定版 有时旧版本的 Node 或 NPM 可能会引发兼容性问题，建议保持这两者的更新至最近一次发布的长期支持 (LTS) 版本。 #### 使用淘宝镜像源加速下载速度 国内开发者可考虑切换成 cnpm 来提高依赖包获取效率： ```bash npm config set registry https://registry.npmmirror.com/ ``` #### 解决网络连接不稳定引起的问题 部分情况下因网络波动造成资源拉取失败，此时应确保稳定的互联网环境；另外也可以手动调整超时时间参数以适应较差网速条件下的操作需求： ```bash export NODE_OPTIONS="--max_old_space_size=4096" ``` #### 处理模板初始化过程中的异常提示 按照交互式向导逐步确认选项设置无误后继续执行后续指令直至结束整个流程。若中途出现未知警告信息不必惊慌，通常不会影响最终成果物的质量与功能实现[^3]。 #### 应对具体技术难题 - 如果选择了自定义配置，在选择特性时要谨慎勾选所需项； - 对于 Babel、ESLint 等工具的选择，推荐采用默认配置文件放置方式以便日后维护管理方便快捷； - 当被询问是否保存当前预设作为将来项目的模板时可根据个人喜好决定回答与否。 以上措施能够有效帮助排除大部分创建过程中可能出现的技术障碍，从而顺利建立起新的 Vue 开发工程实例[^1]。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值