vue修改config后怎么生效_为什么vue某些组件更改后需要重新运行项目才有效果

第一步骤

当项目做一个圆环进度条的时候，我自己用canvas写了一个js,并且封装成函数。当时想到的是直接将函数写在组件中然后进行调用：

报错了：Uncaught TypeError: Cannot read property ‘getContext’ of null

然后意识到canvas的getContext方法需要在页面文档加载完成之后才会去触发识别这个属性。所以canvas写的代码不能直接放在组件当中。

第二步骤

后面就将canvas的js代码写在外部，然后用在index.html去调用，但是发现这样很麻烦，应该当页面无论是初始化还是加载某一个组件时候，都会去调用这类代码，有可能还会报错。

重点解决方法

后面想了想，能不能将canvas.js作为一个模块在需要引用这个模块的组件中去调用它。去往上看了一下这类知识。也找到了方法，之后就是实施起来。canvas.js如下所示：

function  loadCanvas(){}

export {loadCanvas};

组件中调用 import loadCanvas from ‘loadCanvas.js’

由于我的vue项目是用vue-cli去生成simple版本的，这个时候继续出错，报错代码如下： webpack_require.i(…) is not a function。

想想这个时候头都大了，一个自写的canvas插件引入到vue的项目中衍生出这么多个问题。但是没办法，还得解决不是。

然后再命令行npm中去查看错误报告，发现这里写图片描述

当我们引入模块额时候并没有发现到这个模块，这个我想应该是在canvas导出的时候出现了问题。我原先用的export 是es6的语法，我不确定它在webpack里面是否被编译了，如果没有我还要去修改webpack.config，这在我看来当前是一件很麻烦的事情，后面我用common.js规范中的module.exports去导出这个canvas模块，最后这个问题解决了。这是我今天vue遇到的坑，希望大家能够多提意见，一起进步