如何在Vue中使用ejs模板。

Question

1.使用的官方vue-cli里的webpack
2.SPA项目，用到vue-router
3.

app.vue

<template lang="ejs">
    <%= user %>
</template>

4.

router.js

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  var user = res.cookies.user || {}
  res.render('index', { user: user });
});

5.问题：
webpack打包的时候报错表示 user 未定义
我自己也感觉写的有问题但是没有找到有关示例
请教一下该如何在vue里正确使用express+ejs模板

Answer 1

用了express+ejs 还要vue干什么，要么直接后端渲染，要么express 提供restful API提供数据 用VUE渲染UI

Answer 2

确实有@papersnake 说的问题

第一，你的app.vue里想用ejs做模版引擎，那你得知道，这里的数据需要在“编译”的时候注入，参考pre-processors

第二，路由部分你又突然冒到服务器端了，然后还真的注入了一个{user: user}，这真心不管用啊。这基本就是刻舟求剑的套路了

Answer 3

webpack打包vue文件时和express服务器端渲染ejs一点关系都没有。
正常情况你应该先webpack生成静态的资源，然后访问express时再根据数据和ejs模板进行渲染返回html给前端。所以这里在webpack时，user怎么能被识别呢？除非你webpack之后的结果是ejs模板

Answer 4

好久之前的问题了。

这里 ejs 是在后端用的，因此把 lang=ejs 去掉应该就可以了吧，然后你的项目打包后要命名为 index.ejs，放到 express 的 view 目录下才行。