一、报错提示: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]);