正文

如何创建服务于 Vue.js SPA 的 Node.js Express 应用程序？

 2023-02-22  193

关键词：

【中文标题】如何创建服务于 Vue.js SPA 的 Node.js Express 应用程序？【英文标题】：How to create Node.js Express app serving a Vue.js SPA? 【发布时间】：2019-05-13 00:05:11 【问题描述】：

我正在尝试建立一个 Node.js 项目，该项目使用 Express 来提供一些后端 API 并提供一个使用 Vue.js 构建的 SPA。

当我使用 Vue cli 初始化项目时，我得到例如src/main.ts 主文件和命令 npm run serve 运行开发服务器并监视更改，npm run build 构建生产版本。

当我使用Express application generator 创建项目时，我得到./app.js 主文件和npm start 来启动服务器并观察变化。

如何将它们组合成一个项目，由同一个 Express 服务器提供服务？最好让单个命令监视+更新服务器和客户端的更改？我想使用 Vue 单文件组件和 TypeScript，这（可能？）需要构建步骤。

（我不需要 Vue 模板的动态服务器端渲染，只需要提供的静态 SPA 应用程序。我更喜欢 TypeScript，但 JavaScript 答案也很好。）

【问题讨论】：

所以你想要一个同时启动服务器和客户端的命令？单个命令应该启动托管客户端的服务器。但是应该注意对两者的更改并自动重新编译。 【参考方案1】：

这些对于您的开发和生产环境会有所不同...

对于开发，请查看concurrently - 它基本上允许您在 package.json 中创建一个脚本来同时启动客户端和服务器，并监视更改等...

对于生产，您的 app.js 中需要这样的内容：

if (process.env.NODE_ENV === 'production') 
  app.use(express.static('client/build'));

  const path = require('path');
  app.get('*', (req, res) => 
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
  );

(上面的代码假设你的目录结构在运行npm run build之后有一个带有构建文件夹的客户端文件夹我更熟悉React而不是Vue......但逻辑应该是相同的...... .)

【讨论】：

如何将我的 Vue js SPA 部署到我的 Django 服务器中？

】如何将我的VuejsSPA部署到我的Django服务器中？【英文标题】：HowdoIdeploymyVuejsSPAintomyDjangoserver?【发布时间】：2019-07-0604:55:50【问题描述】：我目前正在按照本指南将我的Vue.js前端与我的Django后端集成：https://medium.com/@williamgnlee/si... 查看详情

如何使用 vue.js 创建适用于单个元素的显示更多/更少按钮？

】如何使用vue.js创建适用于单个元素的显示更多/更少按钮？【英文标题】：Howtocreateashowmore/lessbuttonwhichappliestoindividualelementwithvue.js?【发布时间】：2020-08-0610:21:02【问题描述】：可以选择显示more文本或less，但@click事件适用于所... 查看详情

如何在 Node.js 服务器上部署 Vue.js 应用程序

】如何在Node.js服务器上部署Vue.js应用程序【英文标题】：HowtodeployaVue.jsapplicationonNode.jsserver【发布时间】：2019-02-1305:25:00【问题描述】：我有一个dist文件夹，其中包含CSS、字体、JS文件夹和一个为Vue.js最小化的index.html文件，可... 查看详情

如何使用 Vue.js 制作 MPA？（或者这个项目应该是一个SPA？）

】如何使用Vue.js制作MPA？（或者这个项目应该是一个SPA？）【英文标题】：HowcanIuseVue.jstomakeaMPA?(OrshouldthisprojectbeaSPA?)【发布时间】：2020-05-2618:56:12【问题描述】：我刚刚学习了Vue，正在尝试找出构建这个项目的最佳方式。要求... 查看详情

vue.js使用vue-cli搭建一个spa项目(代码片段)

WHY之所以写这篇如何运用脚手架自动化构建出一个项目的大架构，主要是面向想入门vue的小伙伴。之前，我第一次接触vue，一直摸不着头脑，想在网上搜个接地气的教程都找不到。SO，我以如何搭建结构为开始，向想入门vue的童... 查看详情

nuxt.js知识点(代码片段)

...没法抓取到SPA的内容页面，所以我们必须把我们的应用在服务端渲染成适合搜索引擎抓取的页面，再下载到客户端。Nuxt.js是Vue.js的通用框架，最常用的就是用来作SSR（服务器端渲染）。再直白点说，就是Vue.js原来是开发SPA（单... 查看详情

vue小模块之功能全面的表格创建表格(代码片段)

Vue小模块之功能全面的表格（二）创建表格技术栈Vue全家桶：前端框架Vue.js状态管理Vuex动态路由匹配vue-routerhttp服务axios模块打包webpackUI框架element数据服务器服务器端node.js基于node的web框架express分布式数据库mongodbmongo... 查看详情

Node.js 和 Vue.js，为啥 Refresh 让 vue.js 的 store 清晰？我如何在 vue.js 中使用上传的图片？

】Node.js和Vue.js，为啥Refresh让vue.js的store清晰？我如何在vue.js中使用上传的图片？【英文标题】：Node.jsandVue.js,whyRefreshmakevue.js\'sstoreclear?Andhowcaniuseuploadedimageinvue.js?Node.js和Vue.js，为什么Refresh让vue.js的store清晰？我如何在vue.js中使... 查看详情

Flask 服务于 Vue.js 包文件。更改时重新编译？

...】：我使用flask作为后端，使用Vue.js作为前端。我用vue-cli创建了我的VueJS项目。我现在设置项目的方式是我的后端正在为我的静态文件提供服务。我，npmrunbuild，并将bundle文件输出到我的查看详情

vue.js开发环境搭建以及创建一个vue实例

Vue.js是一套构建用户界面的渐进式框架。Vue只关注视图层，采用自底向上增量开发的设计。Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。在使用vue.js之前首先需要搭建vue.js的开发环境，下面，我们就来... 查看详情

windows10安装node.js，vue.js以及创建第一个vue.js项目(代码片段)

【工具官网】Node.js: http://nodejs.cn/淘宝NPM: https://npm.taobao.org/一、安装环境1、本机系统：Windows10Pro（64位）2、Node.js：v6.9.2LTS（64位）二、安装Node.js步骤1、下载对应你系统的Node.js版本:https://nodejs.org/en/download/2、选安装目录... 查看详情

为啥 Laravel 附带 Vue？（SPA 与 MVC）

...架，而Vue将用于SPA；这些都是不同的应用架构，那么它们如何一起使用呢？我目前正在尝试查看详情

vue.js首屏优化

我们以vue-cli工具为例，使用vue-router搭建SPA应用，UI框架选用element-ui，ajax方案选用axios,并引入vuex，使用vuex-router-sync将router同步到store，服务器使用本地Nginx服务。构建项目vue-initwebpackvue-spa-starter-kitcdvue-spa-starter-kitnpminstallnpminsta 查看详情

在 Node.js 和 Vue.js 之间共享 TypeScript 代码

...发布时间】：2021-09-1803:43:50【问题描述】：我很难弄清楚如何做到这一点。我的环境是：Node.js16.1.xVue.js3.xTypeScript4.2.4我的目录结构是这样的：根（Node.js服务器）共享MySharedFile.tsui（Vue. 查看详情

vue-router入门学习

对于单页面应用，尤其是移动端的网页应用，使用<a></a>标签实现页面切换和跳转会有300ms的延迟，遇到网速慢就会一直加载。所以在SPA应用中，用视图切换来模拟页面的切换vue-router是Vue.js官方的路由插件，它和Vue.js是... 查看详情

如何使用 spa-prerender 插件在 VUE 中预渲染“*”（未找到）页面

】如何使用spa-prerender插件在VUE中预渲染“*”（未找到）页面【英文标题】：Howtoprerendera"*"(not-found)pageinVUEusingspa-prerenderplugin【发布时间】：2019-01-2613:19:55【问题描述】：我在Vue.js中使用spa-prerender-plugin，一切正常。但是... 查看详情

Vue.js / Laravel - 正确处理注销

...经掌握了基本工作-用户可以注册和登录。我只是不知道如何创建注销功能。这是我目前拥有的：AuthController.php:publicfunctionlogout()$acces 查看详情

Laravel + Vue.js MPA/SPA 混合结构的建议和思考

】Laravel+Vue.jsMPA/SPA混合结构的建议和思考【英文标题】：Laravel+Vue.jsMPA/SPAhybridstructuresuggestionsandthoughts【发布时间】：2019-02-1914:47:27【问题描述】：我想到了以下MPA-SPA混合，我基本上将每个页面视为一个SPA，但仍然像习惯性一样... 查看详情

正文