Skip to content

docs(zh): keep updated #2301

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.

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

Merged
merged 3 commits into from
Sep 21, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
4 changes: 2 additions & 2 deletions docs/zh/config/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ module.exports = {
- Type: `string`
- Default: `'/'`

部署应用时的基本 URL。用法和 webpack 本身的 `output.publicPath` 一致,但是 Vue CLI 在一些其他地方也需要用到这个值,所以**请始终使用 `baseUrl` 而不要直接修改 webpack 的 `output.publicPath`**。
部署应用包时的基本 URL。用法和 webpack 本身的 `output.publicPath` 一致,但是 Vue CLI 在一些其他地方也需要用到这个值,所以**请始终使用 `baseUrl` 而不要直接修改 webpack 的 `output.publicPath`**。

默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 `https://www.my-app.com/`。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 `https://www.my-app.com/my-app/`,则设置 `baseUrl` 为 `/my-app/`。

Expand Down Expand Up @@ -198,7 +198,7 @@ module.exports = {

需要注意的是该选项仅影响由 `html-webpack-plugin` 在构建时注入的标签 - 直接写在模版 (`public/index.html`) 中的标签不受影响。

更多细节可查阅: [CORS settings attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes)
更多细节可查阅: [CORS settings attributes](https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_settings_attributes)

### integrity

Expand Down
4 changes: 2 additions & 2 deletions docs/zh/dev-guide/ui-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ api.describeConfig({
})
```

如果你没有定义图标,那就展示该插件可能存在的 logo (详见 [Logo](#logo))。
如果你没有定义图标,那就展示该插件可能存在的 logo (详见 [Logo](./ui-info.md#logo))。

### 配置文件

Expand Down Expand Up @@ -364,7 +364,7 @@ api.describeTask({
})
```

如果你没有定义图标,那就展示该插件可能存在的 logo (详见 [Logo](#logo))。
如果你没有定义图标,那就展示该插件可能存在的 logo (详见 [Logo](./ui-info.md#logo))。

### 任务参数

Expand Down
2 changes: 1 addition & 1 deletion docs/zh/guide/build-targets.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

- `index.html` 会带有注入的资源和 resource hint
- 第三方库会被分到一个独立包以便更好的缓存
- 小于 10kb 的静态资源会被内联在 JavaScript 中
- 小于 4kb 的静态资源会被内联在 JavaScript 中
- `public` 中的静态资源会被复制到输出目录中

## 库
Expand Down
2 changes: 1 addition & 1 deletion docs/zh/guide/cli-service.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ npx vue-cli-service serve
--https 使用 https (默认值:false)
```

`serve` 命令会启动一个开发服务器 (基于 [webpack-dev-server](https://github.com/webpack/webpack-dev-server)) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。
`vue-cli-service serve` 命令会启动一个开发服务器 (基于 [webpack-dev-server](https://github.com/webpack/webpack-dev-server)) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。

除了通过命令行参数,你也可以使用 `vue.config.js` 里的 [devServer](../config/#devserver) 字段配置开发服务器。

Expand Down
77 changes: 74 additions & 3 deletions docs/zh/guide/deployment.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

### 本地预览

`dist` 目录需要启动一个 HTTP 服务器来访问,所以以 `file://` 协议直接打开 `dist/index.html` 是不会工作的。在本地预览生产环境构建最简单的方式就是使用一个 Node.js 静态文件服务器,例如 [serve](https://github.com/zeit/serve):
`dist` 目录需要启动一个 HTTP 服务器来访问 (除非你已经将 `baseUrl` 配置为了一个相对的值),所以以 `file://` 协议直接打开 `dist/index.html` 是不会工作的。在本地预览生产环境构建最简单的方式就是使用一个 Node.js 静态文件服务器,例如 [serve](https://github.com/zeit/serve):

``` bash
npm install -g serve
Expand Down Expand Up @@ -168,7 +168,7 @@ Firebase will ask some questions on how to setup your project.

{
"hosting": {
"public": "app"
"public": "dist"
}
}
```
Expand Down Expand Up @@ -206,7 +206,45 @@ Please refer to the [Firebase Documentation](https://firebase.google.com/docs/ho

### Now

> TODO | Open to contribution.
1. Install the Now CLI globally: `npm install -g now`

2. Add a `now.json` file to your project root:

```json
{
"name": "my-example-app",
"type": "static",
"static": {
"public": "dist",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
"alias": "vue-example",
"files": [
"dist"
]
}
```

You can further customize the static serving behavior by consulting [Now's documentation](https://zeit.co/docs/deployment-types/static).

3. Adding a deployment script in `package.json`:

```json
"deploy": "npm run build && now && now alias"
```

If you want to deploy publicly by default, you can change the deployment script to the following one:

```json
"deploy": "npm run build && now --public && now alias"
```

This will automatically point your site's alias to the latest deployment. Now, just run `npm run deploy` to deploy your app.

### Stdlib

Expand Down Expand Up @@ -239,3 +277,36 @@ Then cd into the `dist/` folder of your project and then run `surge` and follow
```

Verify your project is successfully published by Surge by visiting `myawesomeproject.surge.sh`, vola! For more setup details such as custom domains, you can visit [Surge's help page](https://surge.sh/help/).

### Bitbucket Cloud

1. As described in the [Bitbucket documentation](https://confluence.atlassian.com/bitbucket/publishing-a-website-on-bitbucket-cloud-221449776.html) you need to create a repository named exactly `<USERNAME>.bitbucket.io`.

2. It is possible to publish to a subfolder of the main repository, for instance if you want to have multiple websites. In that case set correct `baseUrl` in `vue.config.js`.

If you are deploying to `https://<USERNAME>.bitbucket.io/`, you can omit `baseUrl` as it defaults to `"/"`.

If you are deploying to `https://<USERNAME>.bitbucket.io/<SUBFOLDER>/`, set `baseUrl` to `"/<SUBFOLDER>/"`. In this case the directory structure of the repository should reflect the url structure, for instance the repository should have a `/<SUBFOLDER>` directory.

3. Inside your project, create `deploy.sh` with the following content and run it to deploy:

``` bash{13,20,23}
#!/usr/bin/env sh

# abort on errors
set -e

# build
npm run build

# navigate into the build output directory
cd dist

git init
git add -A
git commit -m 'deploy'

git push -f git@bitbucket.org:<USERNAME>/<USERNAME>.bitbucket.io.git master

cd -
```
19 changes: 17 additions & 2 deletions docs/zh/guide/html-and-static-assets.md
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,22 @@ module.exports = {
h('img', { attrs: { src: require('./image.png') }})
```

在其内部,我们通过 `file-loader` 用版本哈希值和正确的公共基础路径来决定最终的文件路径,再用 `url-loader` 将小于 10kb 的资源内联,以减少 HTTP 请求的数量。
在其内部,我们通过 `file-loader` 用版本哈希值和正确的公共基础路径来决定最终的文件路径,再用 `url-loader` 将小于 4kb 的资源内联,以减少 HTTP 请求的数量。

你可以通过 [chainWebpack](../config/#chainwebpack) 调整内联文件的大小限制。例如,下列代码会将其限制设置为 10kb:

``` js
// vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('images')
.use('url-loader')
.loader('url-loader')
.tap(options => Object.assign(options, { limit: 10240 }))
}
}
```

### URL 转换规则

Expand All @@ -136,7 +151,7 @@ h('img', { attrs: { src: require('./image.png') }})
- 如果 URL 以 `~` 开头,其后的任何内容都会作为一个模块请求被解析。这意味着你甚至可以引用 Node 模块中的资源:

``` html
<img src="~/some-npm-package/foo.png">
<img src="~some-npm-package/foo.png">
```

- 如果 URL 以 `@` 开头,它也会作为一个模块请求被解析。它的用处在于 Vue CLI 默认会设置一个指向 `<projectRoot>/src` 的别名 `@`。**(仅作用于模版中)**
Expand Down
6 changes: 5 additions & 1 deletion docs/zh/guide/mode-and-env.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,11 @@ VUE_APP_SECRET=secret

为一个特定模式准备的环境文件的 (例如 `.env.production`) 将会比一般的环境文件 (例如 `.env`) 拥有更高的优先级。

此外,Vue CLI 启动时已经存在的环境变量拥有最高优先级,并不会被 `.env` 文件覆写。如果在环境中有默认的 `NODE_ENV`,你可能需要考虑移除它。
此外,Vue CLI 启动时已经存在的环境变量拥有最高优先级,并不会被 `.env` 文件覆写。
:::

::: warning NODE_ENV
如果在环境中有默认的 `NODE_ENV`,你应该移除它或在运行 `vue-cli-service` 命令的时候明确地设置 `NODE_ENV`。
:::

## 模式
Expand Down