问题描述
在这个带有硬编码 url 的简单示例中，我的 Vue.js 组件没有呈现，纯 html 被呈现，但我有组件的所有地方都显示为空白.
In this simple example with hardcoded url my Vue.js components not rendering, plain html get rendered but all places i have a component appear blank.
Phantom.js 应该可以和 Vue.js 一起正常工作吗?
Phantom.js should work normally with Vue.js?
var webPage = require('webpage');
var page = webPage.create();
page.viewportSize = { width: 1920, height: 1080 };
page.open("-----------", function start(status) {
page.render('test.jpeg', {format: 'jpeg', quality: '100'});
phantom.exit();
});
为想要帮助和做测试的人提供快速的 vue 代码.
Quick vue code for who want to help and do the test.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js" charset="utf-8"></script>
<style media="screen"> body { background-color: grey; } </style>
</head>
<body>
plain text before vue
<div id="app" v-text="title" />
plain text after vue
<script type="text/javascript">
const app = new Vue({ el : '#app', data () { return { title : 'Vue Title' } } });
</script>
</body>
</html>
推荐答案
检查您的 phantomjs 版本.Phantomjs 2.x 版与 vuejs 一起工作得很好.
Check your phantomjs version. Phantomjs Version 2.x would work just fine with vuejs.
可能是 phantomjs 运行得太快，以至于元素在到达代码的那部分时还不可用.在尝试访问元素之前，使用 waitForElement 或 wait 来引发延迟.
It's possible that phantomjs is running too quick that the element is not yet available when it reach that part of the code. Use waitForElement or wait to induce a delay before trying to access the element.
这篇关于尝试使用 Phantom.js 生成 PDF 时 Vue.js 未呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！