node.js+vue3 实现_vue3 node服务器-CSDN博客

访问Node.js的官方网站，根据你的操作系统选择合适的版本进行下载及安装，记得配置其node的路径目录到环境变量中。（https://nodejs.org/en/download/）。
打开命令提示符（cmd）或PowerShell。
输入命令node -v，查看Node.js的版本信息。如果正确显示版本号，则说明Node.js已成功安装。
输入命令npm -v，查看npm（Node.js的包管理器）的版本信息。

1.2 node.js+vue3预期

一个基本的Vue 3和Node.js结合的示例。

使用Node.js搭建一个简单的服务器。
使用Vue 3创建一个简单的前端应用。

二、项目及程序代码

2.1 创建项目

创建项目目录，例如node_vue3，该目录包含以下文件

public/
-- index.html
src/
-- main.js
-- App.vue
server.js
vue.config.js

2.2 Node.js 服务器 (server.js)

const express = require('express');
const path = require('path');
const app = express();
 
// 设置静态文件目录
app.use(express.static(path.join(__dirname, 'public')));
 
// 设置单页面应用的路由，将所有路由指向index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'public/index.html'));
});
 
// 监听3000端口
app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

`2.3 public/index.html`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue 3 App</title>
</head>
<body>
  <div id="app">hello world!</div>
</body>
</html>

`2.4 src/main.js`

import { createApp } from 'vue';
import App from './App.vue';
 
const app = createApp(App);
app.mount('#app');

`2.5 src/App.vue`

<template>
  <div>
    <h1>Hello Vue 3!</h1>
  </div>
</template>
 
<script>
export default {
  name: 'App'
};
</script>

`2.6 vue.config.js`

module.exports = {
  // 配置生产环境和开发环境下的公共路径
  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/'
};

三、编译实现

3.1 安装必要的依赖

进入该项目目录，启动命令行：

npm init -y
npm install express vue@latest vue-loader@latest vue-template-compiler @vue/compiler-sfc

3.2 运行Node.js服务器

node server.js

3.3 访问服务

在浏览器输入