Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(cn): improve translations of development-vagrant #1850

Merged
merged 3 commits into from
Nov 24, 2023
Merged

docs(cn): improve translations of development-vagrant #1850

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7a3e46d
docs(cn): improve translations of development-vagrant
Yucohny Nov 24, 2023
05d333a
Update development-vagrant.mdx
Yucohny Nov 24, 2023
dcd3ad6
Update development-vagrant.mdx
Yucohny Nov 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 13 additions & 14 deletions src/content/guides/development-vagrant.mdx
View file
Open in desktop
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 不发送到文件系统事件的常见问题，此问题会导致服务器无法重新加载文件更改。
Loading