node vuecli3部署项目

### 如何使用 Vue CLI 3 部署 Node.js 项目

#### 安装必要的环境和工具

确保已安装最新版本的 Node.js 和 npm 或 yarn。这可以通过命令 `node -v` 来验证是否成功安装[^1]。

#### 创建新项目

通过 Vue CLI 创建一个新的 Vue 项目：

vue create my-project-name

此命令将引导完成一系列选项的选择，包括预设功能和其他配置项。对于希望与 Node.js 后端集成的情况，建议选择手动配置并启用 Router 功能以便于前后端分离开发模式下的路由管理。

#### 修改构建设置

为了更好地适应全栈应用的需求，在项目的根目录下创建或编辑 `vue.config.js` 文件来进行自定义 Webpack 构建配置。例如调整静态资源路径、代理 API 请求至本地服务器等操作均可以在此处实现[^3]。

#### 设置反向代理支持跨域请求

如果前端需要调用同一台机器上运行的不同端口的服务，则可以在 `vue.config.js` 中添加 devServer.proxy 属性来解决开发期间可能出现的 CORS (Cross-Origin Resource Sharing) 跨源资源共享问题:

module.exports = {
    devServer: {
        proxy: 'http://localhost:3000' // 假定后端服务监听的是 3000 端口
    }
}

#### 打包生产环境代码

当准备部署应用程序时，可执行如下命令生成优化后的静态文件供线上发布使用：

npm run build

该指令将会把编译好的 dist 目录放置在项目根部，其中包含了所有经过压缩混淆处理过的 HTML/CSS/JS 文件以及公共资源素材，可以直接上传到任何 HTTP(S) 服务器上去提供访问。

#### 整合 Express 实现简单API接口

考虑到某些场景可能不需要完整的 Koa / Egg.js 这样的大型框架作为后台支撑，此时可以选择轻量级解决方案——Express 搭配 jsonwebtoken 提供基本的身份认证机制即可满足大部分需求；另外也可以考虑采用 GraphQL 替代 RESTful 设计风格以减少客户端和服务端之间的交互次数从而提高性能表现[^2]。