使用vue开发Chrome插件——vue无法正常使用（CSP环境导致）

最新推荐文章于 2024-07-23 16:31:32 发布

Vrildouze

最新推荐文章于 2024-07-23 16:31:32 发布

阅读量1.1k

点赞数 2

分类专栏：前端开发学习笔记文章标签： chrome vue.js csp

本文链接：https://blog.csdn.net/Neonsekii/article/details/120081484

版权

在使用Vue开发Chrome插件时，由于Content Security Policy（CSP）限制，Vue的标签内数据无法正常渲染。官方解释表明CSP导致此问题。解决方法是在配置文件中添加`unsafe-inline`策略，从而允许内联JS执行，刷新插件后数据成功渲染。

摘要由CSDN通过智能技术生成

使用vue开发Chrome插件——vue无法正常使用（CSP环境导致）

问题描述：
这几天在尝试着用vue开发Chrome小程序，但是在开发的第一步就遇到了问题，在尝试用vue进行数据渲染的时候发现数据无法被渲染并且处于vue标签内的所有标签都会被禁止渲染。

前端代码：

    <body>
        <div>test outSide</div>
        <div id="app">
            <p>{
  { message }}</p>
            <div>hello</div>
        </div>
    </body>

vue代码：

let vm = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue.js!'
    }
})

渲染结果如下：

可以看到，标签内的数据全都没有被渲染，而标签外的数据正常显示。

问题根源：
刚开始以为是因为自己的vue代码使用不规范，但将vue官网给出的demo放入后也没有成功渲染，找了一下问题，发现vue的官网有如下解释：

最低0.47元/天解锁文章

Vrildouze

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录