极客观点
项目管理
HarmonyOS
前言
最近在学着制作chrome-extension,打算用element做页面组件及主题,但在此需要引入vue.js才可以.疑问就在于vue.js 2.*的使用碰到了CSP,而官方示例上只有一句话概括,让我还是有点不明所以...
尝试下载github上的vue.js,分之切换至dev,并在目录中执行npm install,随后引入dist/vue.js至html.
如果是在浏览器中直接运行html文件,无任何问题,组件及主题正确识别,但在chrome-extension中则不生效.
页面代码如下
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 200px;
height: 100px;
}
div {
line-height: 100px;
font-size: 42px;
text-align: center;
}
</style>
<link href="./js/element-ui/packages/theme-default/lib/index.css" rel="stylesheet">
</link>
</head>
<body>
<div id="clock_div">
<el-tag>
标签一
</el-tag>
</div>
</body>
<!-- 先引入 Vue -->
<script src="./js/vue/dist/vue.js"></script>
</html>
<!-- 引入组件库 -->
<script src="./js/element-ui/lib/index.js"></script>
<script>
new Vue().$mount('#clock_div')
</script>
chrome
这个是chrome的CSP安全策略导致的，只要设置好
Content-Security-Policy就行了。在页面中添加以下
<mate>：这些都是使用 vue 时需要用到的机制。