使用node.js+express搭建服务器，将vue打包后生成的dist目录在本地运行

曾经终败给现在 2023-01-17 13:50 432阅读 0赞

### 文章目录 ###

*  前言
 *  一、nodejs+express搭建服务器
 *  二、在搭建好的服务器中运行本地dist目录

--------------------

# 前言 #

vue项目打包后生成的dist目录如果直接在本地打开index.html,在浏览器中会报错，无法运行起来。  
  
如果想在本地运行，我们可以借助node.js+express搭建一个服务器，将打包后的文件部署在服务器上，就可以运行起来了。

--------------------

# 一、nodejs+express搭建服务器 #

1.  Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具，使用 Express 可以快速地搭建一个完整功能的网站。
2.  **全局安装express-generator**

npm install express --save -g
    npm install express-generator --save -g

1.  安装完成后使用express创建一个项目  
    **express server (server为项目名称,由你自己定)**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDExMTg2NA_size_16_color_FFFFFF_t_70]
2.  创建好项目之后

cd server 进入项目
       npm install 下载依赖
       npm start  启动项目

5.看到如下提示，说明启动成功  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDExMTg2NA_size_16_color_FFFFFF_t_70 1]  
6.在浏览器输入localhost:3000  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDExMTg2NA_size_16_color_FFFFFF_t_70 2]

服务器搭建完成

# 二、在搭建好的服务器中运行本地dist目录 #

将dist目录中的文件复制到server/public目录下
    然后执行 npm start 
    在浏览器输入localhost:3000

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDExMTg2NA_size_16_color_FFFFFF_t_70]: /images/20221021/02fa0df267484bad89d360cd715e5b74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDExMTg2NA_size_16_color_FFFFFF_t_70 1]: /images/20221021/95488a16208241f5baece3d9b1b83246.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDExMTg2NA_size_16_color_FFFFFF_t_70 2]: /images/20221021/5e7ef5b24b27469eba5001f989f34a17.png