Skip to content

Commit

Permalink
docs(cn): improve translations of development-vagrant (#1850)
Browse files Browse the repository at this point in the history
  • Loading branch information
Yucohny authored Nov 24, 2023
1 parent 42d45e7 commit 32408fe
Showing 1 changed file with 13 additions and 14 deletions.
27 changes: 13 additions & 14 deletions src/content/guides/development-vagrant.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: 开发 - Vagrant
title: 使用 Vagrant 在虚拟机运行开发环境
sort: 11
contributors:
- SpaceK33z
Expand All @@ -11,7 +11,7 @@ translators:
- lcxfs1991
---

如果你在开发一个更加高级的项目,并且使用 [Vagrant](https://www.vagrantup.com/) 来实现在虚拟机(Virtual Machine)上运行你的开发环境,那你可能会需要在虚拟机中运行 webpack。
如果正在开发一个更加高级的项目,并且需要使用 [Vagrant](https://www.vagrantup.com/) 在虚拟机上运行开发环境,那可能会需要在虚拟机中运行 webpack。

## 配置项目 $#configuring-the-project$

Expand All @@ -23,13 +23,13 @@ Vagrant.configure("2") do |config|
end
```

然后,在项目中安装 `webpack``webpack-cli``@webpack-cli/serve``webpack-dev-server`
然后,在项目中安装 `webpack``webpack-cli``@webpack-cli/serve``webpack-dev-server`

```bash
npm install --save-dev webpack webpack-cli @webpack-cli/serve webpack-dev-server
```

确保提供一个 `webpack.config.js` 配置文件。如果还没有准备,下面的示例代码可以作为起步的最简配置:
创建 `webpack.config.js` 配置文件,下面的示例代码可以作为起步的最简配置:

```js
module.exports = {
Expand All @@ -38,7 +38,7 @@ module.exports = {
};
```

然后,创建一个 `index.html` 文件。其中的 `script` 标签应当指向你的 bundle。如果没有在配置中指定 `output.filename`其默认值是 `bundle.js`
然后,创建一个 `index.html` 文件。其中的 `script` 标签应当指向 bundle。如果没有在配置中指定 `output.filename`其默认值为 `bundle.js`

```html
<!DOCTYPE html>
Expand All @@ -52,18 +52,17 @@ module.exports = {
</html>
```

注意,你还需要创建一个 `app.js` 文件。
注意,还需要创建一个 `app.js` 文件。

## 启动服务器 $#running-the-server$

现在,我们启动服务器
现在启动服务器

```bash
webpack serve --host 0.0.0.0 --client-web-socket-url ws://10.10.10.61:8080/ws --watch-options-poll
```

默认只允许从 localhost 访问服务器。所以我们需要修改 `--host` 参数,
以允许在我们的宿主 PC 上访问。
由于默认只允许从 localhost 访问服务器,所以需要修改 `--host` 参数,以允许在我们的宿主 PC 上访问。

`webpack-dev-server` 会在包中引入一个脚本,此脚本连接到 WebSocket,这样可以在任何文件修改时,触发重新加载应用程序。
`--client-web-socket-url` 标志可以确保脚本知道从哪里查找 WebSocket。默认情况下,服务器会使用 `8080` 端口,因此也需要在这里指定。
Expand All @@ -74,9 +73,9 @@ webpack serve --host 0.0.0.0 --client-web-socket-url ws://10.10.10.61:8080/ws --

## 配合 nginx 的高级用法 $#advanced-usage-with-nginx$

为了更好的模拟类生产环境(production-like environment),还可以用 nginx 来代理 `webpack-dev-server`
为了更好的模拟类生产环境,可以使用 nginx 来代理 `webpack-dev-server`

在你的 nginx 配置文件中,加入下面代码:
nginx 配置文件中,加入下面代码:

```nginx
server {
Expand All @@ -103,8 +102,8 @@ server {
webpack serve --client-web-socket-url ws://10.10.10.61:8080/ws --watch-options-poll
```

现在只能通过 `127.0.0.1` 访问服务,这点关系不大,因为 ngnix 能够使得你的 PC 电脑能访问到服务器
现在只能通过 `127.0.0.1` 访问服务,不过这并不影响,因为 ngnix 已经能够支持 PC 电脑访问到服务器

## 结论 $#conclusion$
## 总结 $#conclusion$

我们能够从静态 IP 访问 Vagrant box,然后使 `webpack-dev-server` 可以公开访问,以便浏览器可以访问到它。然后,我们解决了 VirtualBox 不发送到文件系统事件的常见问题,此问题会导致服务器无法重新加载文件更改。
我们能够从静态 IP 访问 VagrantBox,然后使 `webpack-dev-server` 可以公开访问,以便浏览器可以访问到它。最后解决了 VirtualBox 不发送到文件系统事件的常见问题,此问题会导致服务器无法重新加载文件更改。

0 comments on commit 32408fe

Please sign in to comment.