mirror of
https://github.com/vuejs/vue-cli.git
synced 2026-03-13 12:40:18 -05:00
docs(zh): keep updated (#2301)
* docs(zh): keep updated * docs(zh): added Bitbucket cloud deployment
This commit is contained in:
勾三股四
@@ -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/`。
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -97,7 +97,7 @@ api.describeConfig({
|
||||
})
|
||||
```
|
||||
|
||||
如果你没有定义图标，那就展示该插件可能存在的 logo (详见 [Logo](#logo))。
|
||||
如果你没有定义图标，那就展示该插件可能存在的 logo (详见 [Logo](./ui-info.md#logo))。
|
||||
|
||||
### 配置文件
|
||||
|
||||
@@ -364,7 +364,7 @@ api.describeTask({
|
||||
})
|
||||
```
|
||||
|
||||
如果你没有定义图标，那就展示该插件可能存在的 logo (详见 [Logo](#logo))。
|
||||
如果你没有定义图标，那就展示该插件可能存在的 logo (详见 [Logo](./ui-info.md#logo))。
|
||||
|
||||
### 任务参数
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
- `index.html` 会带有注入的资源和 resource hint
|
||||
- 第三方库会被分到一个独立包以便更好的缓存
|
||||
- 小于 10kb 的静态资源会被内联在 JavaScript 中
|
||||
- 小于 4kb 的静态资源会被内联在 JavaScript 中
|
||||
- `public` 中的静态资源会被复制到输出目录中
|
||||
|
||||
## 库
|
||||
|
||||
@@ -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) 字段配置开发服务器。
|
||||
|
||||
|
||||
@@ -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
|
||||
@@ -168,7 +168,7 @@ Firebase will ask some questions on how to setup your project.
|
||||
|
||||
{
|
||||
"hosting": {
|
||||
"public": "app"
|
||||
"public": "dist"
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -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
|
||||
|
||||
@@ -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 -
|
||||
```
|
||||
|
||||
@@ -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 转换规则
|
||||
|
||||
@@ -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` 的别名 `@`。**(仅作用于模版中)**
|
||||
|
||||
@@ -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`。
|
||||
:::
|
||||
|
||||
## 模式
|
||||
|
||||
Reference in New Issue
Block a user