express 服务器启动vue项目打包出来的dist文件夹

￡神魔★判官ぃ 2023-10-07 18:42 59阅读 0赞

#### 文章目录 ####

*  环境要求
 *  1、安装express
 *  2、安装express-generator
 *  3、创建项目
 *  4、安装项目依赖
 *  5、把dist文件夹下的所有东西复制到public文件夹
 *  6、启动项目
 *  其他
 *  参考文档

## 环境要求 ##

*  需要有node环境，这里不多加介绍
 *  cmd打开直接给予管理员身份，不然很多时候会出现“写”权限不够的问题
 *  下面的这些命令打开windows的cmd窗口，选择你的工作文件夹，直接输入命令即可

## 1、安装express ##

npm install express --save -g

## 2、安装express-generator ##

npm install express-generator --save -g

## 3、创建项目 ##

*  demo为express项目名字

express demo

*  进入刚才创建的项目demo

cd demo

## 4、安装项目依赖 ##

npm install

## 5、把dist文件夹下的所有东西复制到public文件夹 ##

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5YyX6aOOdG90bw_size_20_color_FFFFFF_t_70_g_se_x_16]

## 6、启动项目 ##

*  默认启动后地址[http://localhost:3000/][http_localhost_3000]

npm start

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5YyX6aOOdG90bw_size_20_color_FFFFFF_t_70_g_se_x_16 1]

*  停止运行：直接关闭cmd窗口或者 ctrl+c

## 其他 ##

*  根文件夹下的app.js文件  
    ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5YyX6aOOdG90bw_size_20_color_FFFFFF_t_70_g_se_x_16 2]
 *  修改启动端口号的方式  
    ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5YyX6aOOdG90bw_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
    ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5YyX6aOOdG90bw_size_20_color_FFFFFF_t_70_g_se_x_16 4]

## 参考文档 ##

*  [express 搭建本地简易服务器][express]
 *  [express搭建服务器][express 1]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5YyX6aOOdG90bw_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/38f5cf178268478ca982785aceb56bba.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YyX6aOOdG90bw==,size_20,color_FFFFFF,t_70,g_se,x_16
[http_localhost_3000]: http://localhost:3000/
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5YyX6aOOdG90bw_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/5a6c33c5fc414e4faf6cb915e3a02f4b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YyX6aOOdG90bw==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5YyX6aOOdG90bw_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/eddfb27725bd46f1a8bd91f0602975b1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YyX6aOOdG90bw==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5YyX6aOOdG90bw_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/fb5622b070304aa489d76aa2760003f1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YyX6aOOdG90bw==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5YyX6aOOdG90bw_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/50fe942fd4a04f489533a81d9a6162f5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YyX6aOOdG90bw==,size_20,color_FFFFFF,t_70,g_se,x_16
[express]: https://blog.csdn.net/qq_37818095/article/details/118491152
[express 1]: https://blog.csdn.net/qq_41359066/article/details/107457688