如何将vue打包后部署egg服务器 • Worktile社区

worktile

Worktile官方账号

要将Vue打包后部署到Egg服务器，需要以下步骤：

打包Vue项目
在Vue项目根目录下，运行以下命令将Vue项目打包：
```
npm run build
```
这将生成一个dist文件夹，包含了打包后的静态资源。
创建Egg项目
使用Egg脚手架工具，创建一个Egg项目：
```
npm init egg --type=simple
```
这将在当前目录下创建一个Egg项目，并自动生成了一些基本的目录和文件。
配置Egg服务器
在Egg项目的config目录下，打开config.default.js文件，进行以下配置：
- 配置静态资源访问：
```
config.static = {
  prefix: '/',
};
```
- 配置Vue项目的入口页面：
```
config.view = {
  defaultViewEngine: 'nunjucks',
  mapping: {
    '.html': 'nunjucks',
  },
};
```
将打包后的Vue静态文件复制到Egg项目的静态资源文件夹
将dist文件夹中的所有文件复制到Egg项目的app/public目录下。

编写路由
在Egg项目的app/router.js文件中，编写Vue页面的路由：

module.exports = app => {
  const { router, controller } = app;
  router.get('/', controller.home.index);
};

添加控制器
在Egg项目的app/controller/home.js文件中，添加一个控制器方法来渲染Vue页面：
```
class HomeController extends Controller {
  async index() {
    await this.ctx.render('index.html');
  }
}
```
启动Egg服务器
在Egg项目根目录下，运行以下命令启动Egg服务器：
```
npm start
```

现在，Vue打包后的项目已经成功部署到Egg服务器上了。可以通过访问Egg服务器的地址来查看部署的页面。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

将Vue打包后部署到Egg服务器需要以下步骤：

打包Vue项目：首先，我们需要使用命令行进入到Vue项目的根目录，然后运行以下命令来打包Vue项目：

npm run build

这将会在项目根目录下生成一个dist文件夹，里面包含了打包后的所有静态文件。

配置Egg服务器：在Egg服务器的根目录下，打开config/config.default.js文件，添加以下配置：

config.static = {
  prefix: '/',
  dir: path.join(appInfo.baseDir, 'dist'),
};

这样配置后，Egg服务器会将静态文件的请求路径指向dist文件夹。

配置路由：在Egg服务器的根目录下，打开app/router.js文件，添加以下配置：

module.exports = app => {
  const { router, controller } = app;
  router.get('/', controller.home.index);
  // 添加以下配置，将所有非静态文件的请求路径指向index.html
  router.get('/*', controller.home.index);
};

这样配置后，当访问非静态文件的请求时，Egg服务器会将请求路径指向index.html文件。

配置控制器：在Egg服务器的根目录下，打开app/controller/home.js文件，添加以下代码：

const Controller = require('egg').Controller;
const path = require('path');

class HomeController extends Controller {
  async index() {
    const { ctx } = this;
    await ctx.render('index.html');
  }
}

module.exports = HomeController;

这样配置后，当访问非静态文件的请求时，Egg服务器会渲染index.html文件。

启动Egg服务器：最后，使用命令行进入到Egg服务器的根目录，运行以下命令启动Egg服务器：

npm start

这会启动Egg服务器，并将Vue项目打包后的静态文件部署到服务器上。

需要注意的是，以上步骤假设你已经安装了Vue CLI和Egg.js，并且具有一定的Vue和Node.js的基础知识。另外，根据你的项目需求，还可能需要其他的配置和调整。

1年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

部署一个打包后的Vue应用到Egg服务器上，你需要完成以下步骤：

Vue项目的打包
首先，需要在本地使用Vue CLI对你的Vue项目进行打包。在终端中运行以下命令：
```
npm run build
```
这将生成一个dist文件夹，其中包含了打包后的静态文件。
创建Egg服务器
在Egg服务器上创建一个项目，可以通过Egg提供的脚手架快速创建：
```
npx egg-init your-egg-project --type=simple
```
配置Egg服务器
在Egg项目中修改config/config.default.js文件，配置静态文件路径，将/public的静态文件路径修改为Vue项目的打包路径/path/to/your-vue-project/dist。
```
exports.static = {
  prefix: '/',
  dir: '/path/to/your-vue-project/dist',
};
```
部署Vue应用
将Vue应用的打包后的dist文件夹内容复制到Egg服务器的静态文件目录下。
启动Egg服务器
在Egg项目的根目录中运行以下命令启动服务器：
```
npm start
```
访问Vue应用
在浏览器中输入服务器的地址，即可访问部署在Egg服务器上的Vue应用。

以上是将Vue打包后部署到Egg服务器的一般步骤。根据实际情况，你可能还需要进行其他相关配置，比如路由、API接口等。确保你的服务器环境和依赖已经正确配置，以确保 Vue 应用正确运行。

1年前 0条评论