Vue.js中具有服务器端渲染的单个文件组件
[英]Single file component with server side rendering in Vue.js
问题描述
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? 如何使用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? 我知道有一些Webpack选项，但是如果不使用Express，我可以不用它吗？ Thx for help. 谢谢。
2 个解决方案
解决方案1
0 2018-12-24 01:45:05
There is now a package that does this called express-vue 现在有一个执行此操作的程序包称为express-vue
I am having great success with it, and it still supports components, mixins, etc 我在此方面取得了巨大的成功，它仍然支持组件，mixin等
"The idea is simple use Node+Express for your Controller and Models, and Vue.js for your Views." “这个想法很简单，对控制器和模型使用Node + Express，对视图使用Vue.js。”
https://www.npmjs.com/package/express-vue courtesy of danmademe https://www.npmjs.com/package/express-vue由danmademe提供
From the npm page: 在npm页面上：
Usage This is the minimum required setup. 用法这是最低要求的设置。 If you don't provide a vueVersion it will use the latest one when the project was published. 如果您不提供vueVersion，它将在项目发布时使用最新版本。 If there is no rootPath it will assume the root is the parent directory of node_modules. 如果没有rootPath，它将假定根是node_modules的父目录。
var expressVue = require("express-vue");
var app = express();
const expressVueMiddleware = expressVue.init();
app.use(expressVueMiddleware);
In your route, assuming you have a main.vue 在您的路线中，假设您有一个main.vue
router.get('/', (req, res, next) => {
const data: {
otherData: 'Something Else'
};
req.vueOptions: {
head: {
title: 'Page Title',
metas: [
{ property:'og:title', content: 'Page Title'},
{ name:'twitter:title', content: 'Page Title'},
]
}
}
res.renderVue('main.vue', data, req.vueOptions);
})
To use Data binding into the vue files you need to pass data in through the data object as above. 要将数据绑定到vue文件中，您需要如上所述通过数据对象传递数据。 express-vue will automatically add anything you put here to the root element of your Vue components. express-vue会自动将您在此处放置的所有内容添加到Vue组件的根元素中。 You do not need to have anything in data in your .vue file, but if you did what you put in res.render will overwrite it. 您不需要在.vue文件中的数据中包含任何内容，但是如果您这样做了，则放入res.render中的内容将覆盖它。
解决方案2
-1 2017-05-16 10:45:44
No you can't. 不，你不能。
Vue (.vue) files are not regular javascript files, so they need to be transpiled into .js to be read by any NodeJS process. Vue（.vue）文件不是常规的javascript文件，因此需要将它们转换为.js才能由任何NodeJS进程读取。
You have several options there, if you don't wan't to use webpack (while I strongly advise you to give it a try): 如果您不想使用webpack，则有几种选择（尽管我强烈建议您尝试一下）：
- You can use Vueify with Gulp, using gulp-vueify2 (I must mention that I am the author of this package). 您可以通过gulp -vueify2将Vueify与Gulp一起使用（我必须提到我是该软件包的作者）。
- Or, probably the recommended way, you can use Nuxt as a middleware . 或者，也许是推荐的方法，您可以将Nuxt用作中间件 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.