当前位置：移动技术网 > IT编程>脚本编程>vue.js > 建立vue项目遇到的一些问题

建立vue项目遇到的一些问题

2020年07月17日 | 移动技术网IT编程 | 我要评论

初始化vue项目过程整理

第一次建立vue项目，刚开始就出了问题

用命令行vue init ex3建立vue项目，运行npm run dev，出现报错

 ERROR  Failed to compile with 9 errors                                                                                        
These dependencies were not found:

* !!vue-style-loader!css-loader?{"sourceMap":true}!../../../../..!web/vue/文档/ex3/node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!../../../../..!web/vue/文档/ex3/node_modules/vue-loader/lib/selector?type=styles&index=0!../../../../..!web/vue/文档/ex3/src/App.vue in ./src/App.vue
* !../../../../..!web/vue/文档/ex3/node_modules/vue-loader/lib/component-normalizer in ./src/App.vue
* !!babel-loader!../../../../..!web/vue/文档/ex3/node_modules/vue-loader/lib/selector?type=script&index=0!../../../../..!web/vue/文档/ex3/src/App.vue in ./src/App.vue
* !!../../../../..!web/vue/文档/ex3/node_modules/vue-loader/lib/template-compiler/index?{"id":"data-v-7ba5bd90","hasScoped":false,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!../../../../..!web/vue/文档/ex3/node_modules/vue-loader/lib/selector?type=template&index=0!../../../../..!web/vue/文档/ex3/src/App.vue in ./src/App.vue
* !!vue-style-loader!css-loader?{"sourceMap":true}!../../../../../..!web/vue/文档/ex3/node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-469af010","scoped":true,"hasInlineConfig":false}!../../../../../..!web/vue/文档/ex3/node_modules/vue-loader/lib/selector?type=styles&index=0!../../../../../..!web/vue/文档/ex3/src/components/HelloWorld.vue in ./src/components/HelloWorld.vue
* !../../../../../..!web/vue/文档/ex3/node_modules/vue-loader/lib/component-normalizer in ./src/components/HelloWorld.vue
* !!babel-loader!../../../../../..!web/vue/文档/ex3/node_modules/vue-loader/lib/selector?type=script&index=0!../../../../../..!web/vue/文档/ex3/src/components/HelloWorld.vue in ./src/components/HelloWorld.vue
* !!../../../../../..!web/vue/文档/ex3/node_modules/vue-loader/lib/template-compiler/index?{"id":"data-v-469af010","hasScoped":true,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!../../../../../..!web/vue/文档/ex3/node_modules/vue-loader/lib/selector?type=template&index=0!../../../../../..!web/vue/文档/ex3/src/components/HelloWorld.vue in ./src/components/HelloWorld.vue
* F:\!web\vue\文档\ex3\node_modules\webpack-dev-server\client\index.js?http://localhost:8080 in multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

To install them, you can run: npm install --save !!vue-style-loader!css-loader?{"sourceMap":true}!../../../../..!web/vue/文档/ex3/node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!../../../../..!web/vue/文档/ex3/node_modules/vue-loader/lib/selector?type=styles&index=0!../../../../..!web/vue/文档/ex3/src/App.vue !../../../../..!web/vue/文档/ex3/node_modules/vue-loader/lib/component-normalizer !!babel-loader!../../../../..!web/vue/文档/ex3/node_modules/vue-loader/lib/selector?type=script&index=0!../../../../..!web/vue/文档/ex3/src/App.vue !!../../../../..!web/vue/文档/ex3/node_modules/vue-loader/lib/template-compiler/index?{"id":"data-v-7ba5bd90","hasScoped":false,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!../../../../..!web/vue/文档/ex3/node_modules/vue-loader/lib/selector?type=template&index=0!../../../../..!web/vue/文档/ex3/src/App.vue !!vue-style-loader!css-loader?{"sourceMap":true}!../../../../../..!web/vue/文档/ex3/node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-469af010","scoped":true,"hasInlineConfig":false}!../../../../../..!web/vue/文档/ex3/node_modules/vue-loader/lib/selector?type=styles&index=0!../../../../../..!web/vue/文档/ex3/src/components/HelloWorld.vue !../../../../../..!web/vue/文档/ex3/node_modules/vue-loader/lib/component-normalizer !!babel-loader!../../../../../..!web/vue/文档/ex3/node_modules/vue-loader/lib/selector?type=script&index=0!../../../../../..!web/vue/文档/ex3/src/components/HelloWorld.vue !!../../../../../..!web/vue/文档/ex3/node_modules/vue-loader/lib/template-compiler/index?{"id":"data-v-469af010","hasScoped":true,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!../../../../../..!web/vue/文档/ex3/node_modules/vue-loader/lib/selector?type=template&index=0!../../../../../..!web/vue/文档/ex3/src/components/HelloWorld.vue F:\!web\vue\文档\ex3\node_modules\webpack-dev-server\client\index.js?http://localhost:8080


 WAIT  Compiling...                                                                                                            
  0% compiling

尝试过网上介绍的各种方法，比如安装依赖：

npm install stylus-loader css-loader style-loader --save-dev
npm install less less-loader --save-dev
npm install sass sass-loader --save-dev

或者删除项目中的node_modules后重新用npm install安装依赖，然后再次执行npm run dev，仍然报错，且错误相同
最后发现是路径上文件名的问题…
把路径上的中文名和特殊符号去掉后就可以成功运行了

 DONE  Compiled successfully in 30539ms                    
 I  Your application is running here: http://localhost:8080

终于可以开始愉快的学习vue啦:-D

本文地址：https://blog.csdn.net/pekaboo/article/details/107381645

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

vue 组件简介

什么是组件？web的组件其实就是页面组成的一部分，好比是电脑中的每一个元件（如硬盘、键盘、鼠标），它是一个具有独立的逻辑和功能或界面，同时又能根据规定的接口规则... [阅读全文]
VUE 单页面使用 echart 窗口变化时的用法

在 vue 项目中，为了使 echart 在窗口变化时能够自适应，要用到 window.resize = function(){ .......};但是我在项... [阅读全文]
Vue文本模糊匹配功能如何实现

模糊匹配功能在下拉菜单的组件中用的非常多，于是打算写几个demo看看细节上是如何实现的。一、最简单的模糊匹配：计算属性<!doctype html>... [阅读全文]
在vue中实现嵌套页面(iframe)

vue中嵌套iframe,将要嵌套的文件放在static下面。src可以使用相对路径，也可使用服务器根路径http:localhost:8088/…<if... [阅读全文]
vue实现从外部修改组件内部的变量的值

1、首先是如何给你定义的变量拿到数据：这里我自己用的是vuex：首先在你项目的src文件夹下创建这么一个目录：之后就要在index.js中将homedatas.... [阅读全文]
Vue单文件组件开发实现过程详解

第一步：配置环境安装cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org安装@v... [阅读全文]
vue-cli或vue项目利用HBuilder打包成移动端app操作

一、测试项目是否可以正确运行指令:npm run dev1、首先我们先建立一个vue的项目，本人用的是vue-cli随便建立的，然后运行项目二、修改路径 (a... [阅读全文]
Vue 监听元素前后变化值实例

我就废话不多说了，大家还是直接看代码吧~export default { data() { return { item: '' } }, watch: ... [阅读全文]
VUE实时监听元素距离顶部高度的操作

效果图如下所示.html<div ref="pronbit"> <div>今日热门&... [阅读全文]
vue监听dom大小改变案例

需求描述：layout左边菜单栏收缩，右边的content区域的swiper宽度没有改变（没有图，朋友的问题，大体画一下）类似于点击折叠左边目录会变小，右边内容... [阅读全文]

网友评论


验证码：

建立vue项目遇到的一些问题

2020年07月17日 | 移动技术网IT编程 | 我要评论

初始化vue项目过程整理

您可能感兴趣的文章:

相关文章:

网友评论