一、报错提示:This dependency was not found:

/components/Lianxi.vue in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue To install it, you can run: npm install --save /components/Lianxi.vue

出错地方：import HelloWorld from '@components/HelloWorld'

原因：在@符号后面少了/

正确写法：import HelloWorld from '@/components/HelloWorld'

---

二、错误：浏览器中vue渲染空白

调试：提示ReferenceError: Demo is not defined

原因：下面的name值没有加单引号

<script> export default { name: ddd, data(){ } } </script>

三、错误：浏览器地址变了,页面不跳转

原因：路由没有使用history模式

export default new Router({ mode: 'history', routes: [ { path: '/', name: 'ddd', component: ddd }, { path: '/hello', name: 'HelloWorld', component: HelloWorld } ] }) 两种模式都可以跳转，只是URL不同： hash模式：http://localhost:8080/#/hello#/ history模式：http://localhost:8080/hello --使用hash模式多了#号

分析：vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id

hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，“#”后面的内容不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。 history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

四、问题：使用element ui框架元素没起作用

原因：没有安装element ui框架和引用element ui

安装过程： 第一步：npm i element-ui -S 第二步：在main.js中引入js和css import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' 第三步：Vue.use(ElementUI)

五、前后端分离项目，跨域请求报错

Access to XMLHttpRequest at 'http://localhost:8080/api/user/login' from origin 'http://localhost:8080

解决方法一：在后端启动类中加入下面代码

public CorsConfiguration buildConfig() { CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.addAllowedOrigin("*"); // 1允许任何域名使用 corsConfiguration.addAllowedHeader("*"); // 2允许任何头 corsConfiguration.addAllowedMethod("*"); // 3允许任何方法（post、get等） return corsConfiguration; } @Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", buildConfig()); // 4 return new CorsFilter(source); }

解决方法二：在Controller类上加@CrossOrigin注解

六、问题：vue前端上传文件后，后端报空指针异常

原因：没有在controller方法参数MultipartFile加@RequestParam("file") @RequestMapping("/upload") public void taxiInfoImport(@RequestParam("file") MultipartFile taxiInfoFile){ try { byte[] bytes = taxiInfoFile.getBytes(); System.out.println(bytes.length); } catch (IOException e) { e.printStackTrace(); } }

七、问题：编译报错 !!vue-style-loader!css-loader?{"sourceMap":true}!../..

错误信息： * !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-f17233f8","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/selector?type=styles&index=1!./Temp.vue in ./src/components/Temp.vue To install it, you can run: npm install --save !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-f17233f8","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/selector?type=styles&index=1!./Temp.vue

解决方法：npm install -g npm

八、element-ui动态表头，表头内容无法显示

错误原因：:label="item.lable"，其中lable属性拼写错误！！！ <el-table-column :prop="item.prop" :label="item.lable"></el-table-column>

问题：this.axios.get报错，Error in mounted hook: "ReferenceError: axios is not defined"

 

解决方法：this.axios.get改为this.$axios.get

九、问题：vue中如何添加对象属性和动态更新data中的数据？

定义一个对象：var compInfo = {}; 合并对象：var cmp = Object.assign(compInfo, compItm); 在method中动态添加数据：this.tableData = this.tableData.concat([cmp]);