vue项目部署到服务器上需要安装node,Vue项目在NodeJs服务端的部署

野性酷女 2022-08-29 05:41 427阅读 0赞

项目打包

在Vue项目中执行npm run build后会有一个dist目录，这个文件夹就是我们要部署上线的项目。

写一个NodeJs小脚本

如果你会点nodejs，脚本就很好理解了，下面是app.js启动脚本的内容：

const fs = require('fs');

const path = require('path');

const express = require('express');

const app = express();

// 模拟数据，api服务

var appData = require('./data.json');

var seller = appData.seller;

var goods = appData.goods;

var ratings = appData.ratings;

// api接口

var apiRoutes = express.Router();

apiRoutes.get('/seller', function(req, res) \{

res.json(\{

erron: 0,

data: seller

\})

\});

apiRoutes.get('/goods', function(req, res) \{

res.json(\{

erron: 0,

data: goods

\})

\});

apiRoutes.get('/ratings', function(req, res) \{

res.json(\{

erron: 0,

data: ratings

\})

\});

app.use('/api', apiRoutes);

app.use(express.static(path.resolve(\_\_dirname, './dist')))

app.get('\*', function(req, res) \{

const html = fs.readFileSync(path.resolve(\_\_dirname, './dist/index.html'), 'utf-8')

res.send(html)

\})

app.listen(8082);

简单解释一下上面的代码：由于项目需要些数据，我的模拟数据都在data.json这个文件里，所以简单写了三个路由,对应获取到模拟数据。

然后把dist目录静态出来，读取dist目录下的index.html(因为是单页应用，只有这一个html文件),监听8082端口。

我们先在本地把要上传的文件都准备好：

我们的这个脚本使用了express框架,所以我们创建了一个package.json，把依赖项添加进去：

\{

"name": "vue-elm-dist",

"version": "1.0.0",

"description": "",

"main": "app.js",

"scripts": \{

"test": "echo \\"Error: no test specified\\" && exit 1"

\},

"author": "",

"license": "ISC",

"dependencies": \{

"express": "^4.15.3"

\}

\}

完成以上操作，我们要上传的文件项目大概长这样：

![2bef4547e7ed][]

新建一个文件夹如elm,把整个项目通过ftp上传到根目录www文件夹下

启动服务

登陆到你的服务端,cd到elm文件夹，执行npm install 安装依赖,然后pm2 start app.js就成功启动服务了

![2bef4547e7ed][]

现在通过ip加端口形式能正常访问，但是如果想通过域名访问就需要配置nginx映射。

关于pm2

PM2是node进程管理工具，可以利用它来简化很多node应用管理的繁琐任务，如性能监控、自动重启、负载均衡等，而且使用非常简单。

常用命令：

pm2 list：查看所有运行的node服务进程状态

pm2 stop app\_name | app\_id ：停止某进程服务

pm2 start app.js --name my-project ：命名进程

[2bef4547e7ed]: /images/20220829/d9c96374f7d742efbd2a0f35493abad6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，427人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 项目部署到服务器上

Vue 项目部署到服务器上打包上传注意 FlashFXP配置编辑器打包在项目终端输入打包命令：`c

灰太狼/ 2023年07月23日 08:56/ 0 赞/ 161 阅读

相关 vue项目部署到tomcat服务器

1.在項目根目錄新建vue.config.js文件 module.exports = { publicPath: process.env.NODE_

╰半橙微兮°/ 2023年07月07日 05:54/ 0 赞/ 2 阅读

相关 SpringBoot项目部署到服务器上

jar包方式，因为springBoot内嵌了tomcot，所以只需要打成jar包上传到服务器就行。 1、项目打包，打包完成会在项目下的target目录生成jar包 ![wa

﹏ヽ暗。殇╰゛Y/ 2022年12月28日 08:27/ 0 赞/ 171 阅读

相关 vue项目部署到云服务器

云服务器我使用的liunx系统 > 需要用到的环境Git Docker Nginx Node 安装Docker > 查看是否已安装Docker列表 > yum

阳光穿透心脏的1/2处/ 2022年12月19日 08:39/ 0 赞/ 189 阅读

相关部署Vue项目到Linux服务器

[步骤1：CentOS7.5 安装docker][1_CentOS7.5 _docker] [步骤2：CentOS7.5基于docker安装nginx][2_CentOS7.

柔情只为你懂/ 2022年10月15日 04:48/ 0 赞/ 286 阅读

相关 vue项目部署到服务器上需要安装node,Vue项目在NodeJs服务端的部署

项目打包在Vue项目中执行npm run build后会有一个dist目录，这个文件夹就是我们要部署上线的项目。写一个NodeJs小脚本如果你会点nodejs，脚本

野性酷女/ 2022年08月29日 05:41/ 0 赞/ 428 阅读

相关 vue脚手架做的项目如何放在服务端,vue项目部署到服务器

在项目目录下（如：e:\\workspace\\taobao）运行 npm run build即可，完成后，就会在项目目录下有多一个dist目录，把dist下的内容就可以放在w

约定不等于承诺〃/ 2022年05月30日 06:51/ 0 赞/ 186 阅读

相关 Nodejs项目服务器部署

> 根据慕课网课程《Nodejs最后一公里》记的笔记，主要了解项目服务器部署流程。 1.项目准备 1.购买自己的域名 2.购买自己的服务器 3.域名备案 4.配

系统管理员/ 2022年04月22日 06:50/ 0 赞/ 333 阅读

相关 springboot+vue项目部署到服务器详细（前后端单独部署）

最近在写springboot+vue的项目，用了前后端分离，写完了之后就该部署了，我认为其中主要是来解决跨域的问题。那么来看看怎么配置的。以下为window环境，下文会说明

女爷i/ 2021年09月25日 00:56/ 0 赞/ 512 阅读

相关在服务器上部署项目

使用软件：xshell 、xftp 步骤： 1.将项目打包（开发工具idea，编程语言Java） 2.使用xshell连接将要部署的服务器 3.使用xftp

深藏阁楼爱情的钟/ 2021年09月23日 13:18/ 0 赞/ 396 阅读