vue中 express.js 如何打包

在Vue.js项目中集成Express.js主要是为了创建一个服务器端渲染或者API后端服务。这里我们概述一下基本步骤：

1. 安装依赖：首先需要安装Node.js环境，并通过npm或yarn分别安装Vue CLI和Express。对于Vue CLI项目，可以在`package.json`文件中添加对`express`的依赖：

   npm install express body-parser cors // 如果你需要额外的中间件

2. 设置 Express 配置：在你的Vue项目根目录下，创建一个`server.js`或类似名的文件，开始编写Express应用的基本配置：

   const express = require('express');
   const app = express();
   
   // 中间件配置
   app.use(express.json());
   app.use(cors());

   // API路由
   app.get('/api/data', (req, res) => {
     // 返回示例数据
     res.json({ message: 'Hello from Express!' });
   });

   // 启动服务器
   const port = process.env.PORT || 3000;
   app.listen(port, () => {
     console.log(`Server running on port ${port}`);
   });

3. 集成到 Vue CLI：通常，Vue CLI会负责前端构建，你不需要直接操作它。但是如果你想从服务器发送预渲染HTML给客户端，可以在`vue.config.js`中设置静态资产路径指向Express服务器地址：

   module.exports = {
     publicPath: '/path/to/your/dist',
     server: {
       host: 'localhost',
       port: 8080, // Express监听的端口
     },
   };

4. 在Vue组件中请求API：当Vue应用启动时，你可以使用axios或其他库从服务器获取数据。例如，在`src/App.vue`或其他合适的组件里：

   import axios from 'axios';

   async mounted() {
     try {
       const response = await axios.get('/api/data');
       console.log(response.data);
     } catch (error) {
       console.error(error);
     }
   }

5. 构建生产版本：当你完成开发并准备好部署时，可以运行Vue CLI的`build`命令生成生产环境的静态文件，然后将这些文件放到Express服务器的`public`目录。