vue项目开发常见错误整理

01.

出现报错信息： [Vue warn]: Property “visible” must be accessed with “$data.visible"becausepropertiesstartingwith"$” or “_” are not proxied in the Vue instance to prevent conflicts with Vue internalsSee: https://vuejs.org/v2/api/#data

原因是把error 对象传进去了，修改为err.message即可。

02.

vue-cli项目打包出现空白页和路径错误问题

npm run build 打包后的文件运行 index.html 一片空白。

情况一：f12调试，全是css，js路径引用错误的问题。
解决：到 config 文件夹中打开 index.js 文件，更改 build 里面的 assetsPublicPath 属性

build: {
	assetsPublicPath: "./"
}
// assetsPublicPath 属性作用是指定编译发布的根目录，‘/’指的是项目的根目录 ，‘./’指的是当前目录。

情况二：控制台也没报错。router-view 或者引用的子组件的内容显示不出来。路由的 history 模式。这是因为在使用了路由之后，在没有后台配合的情况下就打开路由的 history 模式，打包出来的文件也是一片空白。
关于 history 模式官方介绍

// 解决

// mode: "history",   // 将这个模式直接注释掉

03.

Uncaught SyntaxError: Invalid or unexpected token

翻译成中文意思是：捕获的查询无效或意外的标记。

代码逻辑没问题，那么就是数据问题了，把页面要展示的数据全部检查一遍后，果然发现疑点

1、多了单引号、双引号

2、加密后的一串16位/32位字符串，在jsp传到后台的时候报错，解决办法：给这串字符串加单引号或者双引号

3、后台数据响应之前需要解密，现在不需要了，响应拦截却做了解密处理，解决方法：增加一个判断条件

其实这个错误提示是告诉我们：数据或者数据处理有特殊字符，要特殊处理。

04.

vue中使用文件流进行下载(new Blob)

通常在写项目的时候会遇到上传下载什么的，在上传完文件后会把文件的路径保存到数据库里以便下载，如果想不通过后台直接下载的话，可以把文件路径给a标签的href属性；

<a href="/user/test/xxxx.txt">点击下载</a>
这样当用户打开浏览器点击链接的时候就会直接下载文件。

但是有个情况，比如txt、png、jpg等这些浏览器支持直接打开的文件是不会执行下载任务的，而是会直接打开文件，这个时候就需要给a标签添加一个download属性；

<a href="/user/test/xxxx.txt" download="文件名.txt">点击下载</a>
这里download也可以不写任何信息，会自动使用默认文件名。

ps.在这里说明一些IE是不支持，只能通过后台代码来处理。

示例：通过接口（响应二进制流）下载文件，代码：

this.$axios.post(url, data, {
            headers: {
              "Content-Type": "application/json;charset=UTF-8"
            },
            responseType: "blob", //二进制流
          })
          .then(function(res) {
            if (!res) return;
            let blob = new Blob([res.data], {
              type: "application/vnd.ms-excel;charset=utf-8"
            });
            let url = window.URL.createObjectURL(blob);
            let aLink = document.createElement("a");
            aLink.style.display = "none";
            aLink.href = url;
            aLink.setAttribute("download", re);
            document.body.appendChild(aLink);
            aLink.click();
            document.body.removeChild(aLink);
            window.URL.revokeObjectURL(url);
          })
          .catch(function(error) {
            console.log("catch error：" + error.message);
          });

05.

使用element-ui组件中的el-button、iview中的Input组件添加@click、@keyup.enter等事件，无效？

做vue项目中，我们会选择各种ui组件去搭建页面，如element ui 、iview等等。在使用它们的组件（如element ui中的和iview中的）绑定事件如@click时，发现并没有效果？

在页面上，使用element ui中的、iview中的或者自己定义的组件，我们习惯称为子组件，给子组件绑定事件@click，它会默认为子组件的自定义事件，子组件内部处理click事件然后向外发送click事件$emit，外部的父组件给子组件绑定的事件才有效。那么，如何给子组件绑定原生事件（也就是不需要子组件内部处理）呢？

给子组件绑定原生事件，需要借助native。

native ： 监听组件根元素的原生事件，主要是给自定义的组件添加原生事件

使用方式如下：

<el-input @click.native="search"/>
 
<el-button @click.native="search">搜索</el-button>

此外，注意的是，如果给普通标签加事件，加了native是无效的，如下：

<div @click.native="click">点击</div>

06.

在vue-cli项目中引入自定义css 和js

一、引入自定义css

在main.js中引入公用css

import '../static/css/common.css'          //引入公用css 

在页面中引入单独css

<style scoped>
    @import '../../static/css/header.css';
</style>

一、引入自定义js

方法一：
自定义 common.js 文件：

const comjs = {

}

comjs.title = function (title) {
  alert(title)
}

export default comjs;

在main.js中引入：

import Comjs from './js/common.js'     //引入公用js
Vue.prototype.$comjs = Comjs;         //添加到vue属性中

方法二：

function title(t){
    alert(t);
}

export {
    title     //多个方法在此处json中export出去
}

在页面中通过 import…from… 引用

<template>
    <div>
        <button class="btn" @click="clickme">click me</button>
    </div>
</template>
<script>
    import {title} from './js/common.js'   //可以选择需要的方法引入
    export default {
        data(){
            return{
            }
        },
        methods:{
            clickme(){
                title('你点我了');
            }
        }
    }
</script>

方法三

window.g = {
	baseUrl: "http://192.168.2.101"
}

function title(t){
    alert(t);
}

在 index.html 中引入

<script src="./common.js"></script>