如何让Sails.js服务器托管并渲染Vue Webpack应用？

我之前做过类似的整合，刚好可以给你一步步讲解怎么实现——不用分开托管，让Sails直接负责渲染Vue应用并托管静态资源。

1. 配置Vue Webpack的构建输出 #

首先要让Vue项目构建后的文件输出到Sails能访问到的目录里，Sails默认的静态资源目录是server/public/，所以我们调整Vue的构建配置：

• 如果你的Vue项目是用Vue CLI创建的，在client/vue.config.js（没有的话新建一个）里添加以下配置：

module.exports = {
  // 设置构建后的资源基础路径，所有静态资源都会带上/vue/前缀
  publicPath: '/vue/',
  // 指定构建输出目录为Sails的public/vue文件夹
  outputDir: '../server/public/vue',
  // 生成单独的入口html文件，后续我们会把它转成EJS视图
  indexPath: 'vue-index.html'
}

• 运行npm run build（在Vue项目根目录执行），你会看到server/public/vue目录下生成了Vue的构建文件，包括静态资源和vue-index.html。

2. 创建Sails的EJS入口视图 #

接下来我们要让Sails渲染Vue的入口页面，用EJS模板承接：

• 在server/views/目录下新建vue-app.ejs文件。
• 打开server/public/vue/vue-index.html，把里面的内容完整复制到vue-app.ejs里。
• 调整里面的静态资源路径，确保指向Sails托管的Vue资源：
  因为我们设置了publicPath: '/vue/'，所以原文件里的资源路径比如<script src="/vue/static/js/app.xxxx.js"></script>已经能被Sails正确识别；如果担心环境差异，可以用Sails的asset() helper生成可靠路径：

  <script src="<%= asset('/vue/static/js/app.xxxx.js') %>"></script>
  

3. 配置Sails路由指向Vue入口 #

现在要让所有前端请求都转到我们的EJS视图，同时保留Sails的API路由优先级：

• 打开server/config/routes.js，在文件末尾添加通配符路由（一定要放在API路由之后，避免覆盖后端接口请求）：

// 所有非API的请求都转到Vue应用的EJS视图
'/*': { view: 'vue-app' }

这样用户访问/或者/dashboard这类前端路由时，都会加载vue-app.ejs，之后Vue的前端路由就会接管页面内容渲染。

4. 开发环境优化（可选） #

如果开发时不想每次修改Vue都重新构建，可以搭配Vue的开发服务器，同时让Sails视图加载开发服务器的资源：

• 在Vue项目里运行npm run serve，启动开发服务器（默认端口8080）。
• 修改server/views/vue-app.ejs里的静态资源路径，指向Vue开发服务器：

  <script src="http://localhost:8080/static/js/app.js"></script>
  <link rel="stylesheet" href="http://localhost:8080/static/css/app.css">
  

• 同时，在server/config/cors.js里配置跨域允许，让Vue开发服务器能调用Sails的API：

module.exports.cors = {
  allRoutes: true,
  origin: 'http://localhost:8080',
  credentials: true
}

这样开发时就能享受Vue的热重载，同时无缝调用Sails后端接口。

5. 测试部署流程 #

• 在Vue项目里运行npm run build，确保构建文件输出到server/public/vue。
• 启动Sails服务器：cd server && sails lift。
• 访问http://localhost:1337（Sails默认端口），应该能看到你的Vue应用正常加载，前端路由、API调用都能正常工作。

注意事项 #

• 确保Sails的静态资源服务启用（默认已启用，可在config/http.js的middleware.order里确认包含static）。
• 如果Vue使用了前端路由的history模式，必须保留通配符路由配置，避免刷新页面时出现404。
• 生产环境下，可以配合Sails的asset pipeline进一步压缩、缓存静态资源，提升加载速度。

内容的提问来源于stack exchange，提问作者JackH