gpt4 book ai didi

javascript - Vue 未在 Chrome 中渲染 - Div 被 <!----> 替换

转载 作者:行者123 更新时间:2023-12-03 02:07:53 25 4
gpt4 key购买 nike

我正在 Cloud Foundry 上部署一个非常基本的 Vue 应用程序。这是单页 Vue 应用程序:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="static/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>

vue.js 在哪里 https://cdn.jsdelivr.net/npm/vue .

这是我尝试可视化已部署的应用程序时的结果: enter image description here

在 Chrome 中 <div id="app">替换为 <!----> .

我尝试查看 vue.js 文件是否在 Chrome 中执行并且它被执行。我不明白为什么在生产中会出现两种不同的行为。当我在本地运行该应用程序时,它在两个浏览器中都运行良好。

谢谢

最佳答案

该问题与服务器中设置的严格内容安全策略有关。CSP 不允许 new Function() 以及 Vue 所需的其他 JavaScript 语法。

我发现将我的 Vue 项目从独立(运行时 + 编译器)切换到仅运行时可以解决问题。仅运行时项目使用渲染函数进行预编译,因此它们符合 CSP 标准。

以下是我如何将 Vue 项目从独立切换到仅运行时(Vue v2.9.2):在文件 build/webpack.base.config.js 中,我评论了别名

module.exports = {
...
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
//'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
}
}

在 src/main.js 中,我从模板配置开始:

new Vue({
el: '#app',
components: { App },
template: '<App/>'
})

渲染一个:

new Vue({
el: '#app',
render: h => h(App)
})

这足以将我的 Vue 项目从独立模式转换为运行时模式,因为我从未创建过使用 template 字段的组件。

关于javascript - Vue 未在 Chrome 中渲染 - Div 被 &lt;!----> 替换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49722701/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com