vue-cli利用nodejs中的express来运行打包后的vue-cli完成的项目(已解决vue-router的history模式)

最新推荐文章于 2023-03-26 17:31:49 发布

转载最新推荐文章于 2023-03-26 17:31:49 发布 · 511 阅读

文章标签：

#vue node

vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何使用Node.js的Express框架在本地服务器上预览已打包的Vue项目。通过安装Express和connect-history-api-fallback，创建服务脚本，即可在指定端口访问dist文件夹内的打包文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载https://blog.youkuaiyun.com/sinat_41087851/article/details/85762749

我们在利用vue脚手架(vue-cli)开发vue的项目时，在开发完毕是需要执行打包命令(npm run build)进行打包，打包后默认生成一个新的文件夹dist，项目的所有前端文件都在这个文件里面。这个时候如果我们需要以本地服务打开这个文件的时候，可以利用其它软件进行打开，比如phpstudy、xampp之类的软件开启本地服务端口(http://127.0.0.1或者http?/localhost:80)进行浏览已经打包完成的项目。

在这里，将介绍利用node中的express来打开本地端口进行浏览。

一、项目已经打包到项目根目录dist文件夹中；
二、直接在项目中进行下载express(npm i express -d)；
三、直接在项目中进行下载中间件connect-history-api-fallback(npm i connect-history-api-fallback -d)
四、创建prod.server.js，内容如下：

//引入express 
const express = require('express');
 //引入中间件，解决history模式
 const history = require('connect-history-api-fallback'); 
 //监听的端口 
 const port = 9999; 
 const app = express();
  //使用中间件 
  app.use(history());
   //设置静态文件路径
    app.use(express.static('./dist')); 
    //监听端口 
    module.exports = app.listen(port, function (err) {
         if (err) { 
                 console.log(err)
                  return
         } else {
                 console.log('Listening at http://localhost:' + port + '\n')     
                 }
     })

五、在项目中执行 node prod.server.js，就可以在本地打开http://localhost:9999进行浏览项目