Question

I'm trying to build my app using server side rendering, but i have this issue, from my server code:

function (exports, require, module, __filename, __dirname) { 
<template>
^^^^^^^^^

which is i guess problem with one file component. Is there any way to avoid this? How can i render the single file component using express server?

This is my server config:

const Vue = require('vue')
const App = require('./src/App.vue');
const server = require('express')();
const renderer = require('vue-server-renderer').createRenderer();

server.get('*', (req, res) => {
    const app = new Vue({
        el: '#app',
        data: {
            url: req.url
        },
        template: '<App/>',
        components: { App }
    })

    renderer.renderToString(app, (err, html) => {
        if (err) {
            res.status(500).end('Internal Server Error')
            return
        }
        res.end(`
          <!DOCTYPE html>
          <html lang="en">
            <head><title>Hello</title></head>
            <body>${html}</body>
          </html>
        `)
    })
})

server.listen(8080);

I know that there is some Webpack options, but can i do this without it, just using express? Thx for help.

Answer 1

现在有一个可以执行此操作的程序包称为express-vue

我在此方面取得了巨大的成功，它仍然支持组件，mixin等

“这个想法很简单，对于您的控制器和模型，使用Node + Express，对于您的视图，使用Vue.js。”

https://www.npmjs.com/package/express-vue由danmademe提供

在npm页面上：

用法这是最低要求的设置。如果您不提供vueVersion，它将在项目发布时使用最新版本。如果没有rootPath，它将假定根目录是node_modules的父目录。

require('dotenv').config({path: 'path-to-.env')

在您的路线中，假设您有main.vue

var expressVue = require("express-vue");

var app = express();

const expressVueMiddleware = expressVue.init();
app.use(expressVueMiddleware);

要使用将数据绑定到vue文件中，您需要如上所述通过数据对象传递数据。 express-vue会自动将您在此处放置的所有内容添加到Vue组件的根元素中。您不需要在.vue文件中的数据中包含任何内容，但是如果您这样做了，则放入res.render中的内容将会覆盖它。

Answer 2

不，你不能。

Vue（.vue）文件不是常规的javascript文件，因此需要将它们转换为.js以供任何NodeJS进程读取。

如果您不想使用网络包，那么您有多种选择（我强烈建议您尝试一下）：

您可以使用gulp-vueify2使用Vueify和Gulp（我必须提到我是此软件包的作者）。
或者，可能是推荐的方式，您可以使用Nuxt作为 middleware。

Single file component with server side rendering in Vue.js

2 个答案: