第五篇 部署Vue3开发的项目

1、背景说明

       完成vue3项目的开发之后，通过本地环境测试，后面就是生产环境的部署发布了，本文简单说明一下，如何在生产环境发布vue3的项目。

2、node环境安装

        Node.js 是一个开源和跨平台的 JavaScript 运行时环境。 它几乎是任何类型项目的流行工具！Node.js 在浏览器之外运行 V8 JavaScript 引擎（Google Chrome 的内核）。 这使得 Node.js 的性能非常好。

       Node.js的中文官网上面下载长期支持版本(LTS)。根据不同的操作系统，可以选择不同的版本，如下图：

      

 

3、本地项目打包

          切换到要打包的项目的根目录下面，执行如下的命令

          

npm run build

          打包完成之后的项目目录下面新增一个dist文件夹，将此文件拷贝到生产环境的部署目录下面。 

4、服务器express环境安装

       基于 Node.js 平台，快速、开放、极简的 Web 开发框架。

       切换到要打包的项目的根目录下面，执行如下的命令进行express的安装：

cnpm i express

5、项目入口js开发，项目根目录下面，不要放到dist中

   

var express = require('express');
var app = express();
var server = require('http').createServer(app);
server.listen(2133);
app.use(express.static('./dist'))
app.get('/',function (req,res) {
res.sendFile(__dirname+'/index.html')
})

6、启动服务

     

node app

7、测试访问

http://ip:端口/

 如果能够正常访问，说明项目已经正式启动了。