diff --git a/docs/zh/config/README.md b/docs/zh/config/README.md index e5a5550aea..e002251167 100644 --- a/docs/zh/config/README.md +++ b/docs/zh/config/README.md @@ -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 diff --git a/docs/zh/dev-guide/ui-api.md b/docs/zh/dev-guide/ui-api.md index 6497830712..2505d79bbd 100644 --- a/docs/zh/dev-guide/ui-api.md +++ b/docs/zh/dev-guide/ui-api.md @@ -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))。 ### 任务参数 diff --git a/docs/zh/guide/build-targets.md b/docs/zh/guide/build-targets.md index 40b900e980..3d41df0c01 100644 --- a/docs/zh/guide/build-targets.md +++ b/docs/zh/guide/build-targets.md @@ -8,7 +8,7 @@ - `index.html` 会带有注入的资源和 resource hint - 第三方库会被分到一个独立包以便更好的缓存 -- 小于 10kb 的静态资源会被内联在 JavaScript 中 +- 小于 4kb 的静态资源会被内联在 JavaScript 中 - `public` 中的静态资源会被复制到输出目录中 ## 库 diff --git a/docs/zh/guide/cli-service.md b/docs/zh/guide/cli-service.md index 171fee6075..c7de584dc3 100644 --- a/docs/zh/guide/cli-service.md +++ b/docs/zh/guide/cli-service.md @@ -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) 字段配置开发服务器。 diff --git a/docs/zh/guide/deployment.md b/docs/zh/guide/deployment.md index 8ac09f0ee4..8f646d00e2 100644 --- a/docs/zh/guide/deployment.md +++ b/docs/zh/guide/deployment.md @@ -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 `.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://.bitbucket.io/`, you can omit `baseUrl` as it defaults to `"/"`. + + If you are deploying to `https://.bitbucket.io//`, set `baseUrl` to `"//"`. In this case the directory structure of the repository should reflect the url structure, for instance the repository should have a `/` 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:/.bitbucket.io.git master + + cd - + ``` diff --git a/docs/zh/guide/html-and-static-assets.md b/docs/zh/guide/html-and-static-assets.md index d818f1f043..f9a75218f6 100644 --- a/docs/zh/guide/html-and-static-assets.md +++ b/docs/zh/guide/html-and-static-assets.md @@ -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 - + ``` - 如果 URL 以 `@` 开头，它也会作为一个模块请求被解析。它的用处在于 Vue CLI 默认会设置一个指向 `/src` 的别名 `@`。**(仅作用于模版中)** diff --git a/docs/zh/guide/mode-and-env.md b/docs/zh/guide/mode-and-env.md index e8297a86ab..cba69be344 100644 --- a/docs/zh/guide/mode-and-env.md +++ b/docs/zh/guide/mode-and-env.md @@ -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`。 ::: ## 模式