关于vue.js开发chrome extension时CSP的疑惑
前言
最近在学着制作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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这个是chrome的CSP安全策略导致的，只要设置好
Content-Security-Policy就行了。在页面中添加以下
<mate>：这些都是使用 vue 时需要用到的机制。
建议参考 https://github.com/vuejs/vue-...，这是一个用 Vue 开发的用于 Vue、Vuex 调试的 chrome extension