vue开发问题总结

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

1. hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，“#”后面的内容不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

1. 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]);