node.js快速部署vue代码详细步骤

下面是“node.js快速部署vue代码详细步骤”的完整攻略：

前置条件

在进行本攻略之前必须确保你已经满足以下条件：

1. 已经安装了Node.js。
2. 已经安装了Vue CLI（可通过运行npm install -g @vue/cli安装）。
3. 对于第二个示例，必须拥有一台可以访问公网的服务器。

步骤

第一步：创建Vue项目

在命令行中运行以下命令：

vue create my-project

其中my-project为你的项目名称，根据提示选择需要的特性即可。

第二步：编译Vue项目

进入到项目目录中，运行以下命令进行编译：

npm run build

这将会生成一个dist目录，里面包含了编译后的代码。

第三步：安装Express

在命令行中运行以下命令安装Express：

npm install express --save

第四步：编写Express服务器代码

在项目根目录下创建一个名为server.js的文件，并编写以下代码：

const express = require('express');
const app = express();

app.use(express.static('dist'));

app.listen(3000, function() {
  console.log('App listening on port 3000!');
});

其中express.static('dist')表示将dist目录作为静态文件服务器的根目录。

第五步：启动Express服务器

在命令行中运行以下命令启动Express服务器：

node server.js

你也可以使用PM2等工具将其作为守护进程来运行。

示例一：本地访问

在浏览器地址栏输入http://localhost:3000，即可访问项目页面。

示例二：公网访问

1. 在服务器上运行ifconfig命令获取服务器IP地址。
2. 修改server.js中的端口号为80。
3. 修改package.json中的"build"命令为"build": "vue-cli-service build --mode production"。
4. 运行npm run build进行编译。
5. 将dist目录上传到服务器。
6. 在服务器上运行nohup node server.js &命令启动Express服务器。
7. 在浏览器地址栏输入服务器IP地址即可访问项目页面。

这就是“node.js快速部署vue代码详细步骤”的完整攻略。