公司的一个后台项目，自己人用，没有兼容性要求。

一直兼容ie8的我，是时候放飞自我了。

下面是暂时遇到的一些问题。

error:Cannot assign to read only property 'exports' of object '#<Object>' 

import 和 module.exports (node语法)不能在一个文件内同时使用，可用 export default 

 

~~~~~~~~~~~~~~~~

有时候封装模块js里需要使用到element-ui某些功能，如弹窗：

import {Notification} from 'element-ui';

Notification.error({

　　title: '错误',

　　message: '这是条错误消息'

});

~~~~~~~~~~~~~~~~

el-input 可以通过绑定@keyup.enter.native来实现覆盖原有事件

el-button不可以，可以自己注册一个事件实现回车登录事件

document.onkeyup = function (e) {

var code = e.charCode || e.keyCode;

    if (code == 13) {

       self.submitForm('ruleForm2');

  }

}

~~~~~~~~~~~~~~~~

报错：did you register the component correctly? For recursive components, make sure to provide the "name" option（组件引进来后没有注册）

export default {

　　name: 'home',

　　components: {

 　　　　HelloWorld//这里注册

　　}

}

 

~~~~~~~~~~~~~~~~

在vue-cli3中使用less

安装less依赖包，<style lang="less"></style>

在style标签内导入外部less

@import "./style/index.less"; @import url("./style/index.less");

在main.js导入外部less

import './style/index.less';

在main.js里引入了正确路径的公共index.less,直接在里面定义变量@width:100px;在别的页面直接引用是不生效的（about.vue）

~~~~~~~~~~~~~~~~

写项目在本地的地址调用线上接口就存在跨域，vue.config.js proxy设置:

module.exports = {

　　baseUrl: './',//打包后打开index文件报错设置此处

　　devServer: {

　　　　port: 8085, // 端口号

　　　　host: 'localhost',

　　　　open: true, //配置自动启动浏览器

　　　　proxy: {//设置代理处理跨域问题

　　　　　　'/api': {

　　　　　　　　target: 'http://192.168.xxx.xxx:8501/',

　　　　　　　　ws: true,

　　　　　　　　changOrigin: true,

　　　　　　　　pathRewrite: function(path, req) { //重写路径，不然会在你的目标路径里多一个/api，导致路径不对

　　　　　　　　　　return path.replace('/api', '');//这注意了，这里正则写的好，下面的匹配怎么写都没问题，我这里就是随便复制文档来用，下面写个api2和这里匹配冲突了，后来改成'/second'

　　　　　　　　}

　　　　　　},

　　　　　　'/second': {

　　　　　　　　target: 'http://192.168.xxx.xxx:8891/',

　　　　　　　　ws: true,

　　　　　　　　changOrigin: true,

　　　　　　　　pathRewrite: function(path, req) {

　　　　　　　　　　return path.replace('/second', '');

　　　　　　　　}

　　　　　　}

　　　　}

　　}

}