Question

在这个简单的例子中，硬编码的网址我的Vue.js组件没有呈现，普通的html会被渲染，但我有一个组件的所有地方都显示为空白。

Phantom.js应该与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代码。

<!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>

Answer 1

检查你的phantomjs版本。 Phantomjs版本2.x可以与vuejs一起使用。

phantomjs可能运行得太快，以至于元素到达代码的那部分时尚不可用。在尝试访问元素之前，请使用waitForElement或等待引发延迟。

尝试使用Phantom.js生成PDF时，Vue.js无法呈现

1 个答案: