From d9ecc01b86686ea5f431a94e66d543c57c650b16 Mon Sep 17 00:00:00 2001 From: winixt Date: Thu, 23 Mar 2023 14:17:00 +0800 Subject: [PATCH] docs: update docs --- docs/guide/config.md | 8 ++--- docs/guide/env.md | 52 ++++++++++++++++++++++++++------- docs/guide/getting-started.md | 6 ++-- docs/reference/cli.md | 40 ++++++++++++------------- docs/reference/config/README.md | 14 +++++++++ 5 files changed, 83 insertions(+), 37 deletions(-) diff --git a/docs/guide/config.md b/docs/guide/config.md index 225bb9f5..0732043e 100644 --- a/docs/guide/config.md +++ b/docs/guide/config.md @@ -51,7 +51,7 @@ export default { mock: false }; // .fes.local.js export default { mock: true, - devServer: { port: 8080 } + devServer: { port: 8000 } }; ``` @@ -60,7 +60,7 @@ export default { ```js { mock: true, - devServer: { port: 8080 } + devServer: { port: 8000 } }; ``` @@ -81,7 +81,7 @@ export default { mock: false }; // .fes.uat.js export default { mock: true, - devServer: { port: 8080 } + devServer: { port: 8000 } }; ``` @@ -96,7 +96,7 @@ FES_ENV=uat fes dev ```js { mock: true, - devServer: { port: 8080 } + devServer: { port: 8000 } }; ``` diff --git a/docs/guide/env.md b/docs/guide/env.md index 49276133..d6452419 100644 --- a/docs/guide/env.md +++ b/docs/guide/env.md @@ -1,11 +1,13 @@ # 环境变量 -在构建或者代码在端上运行中需要一些跟区分于环境的变量，用于配置构建流程或者运行时过程，这时候我们可以配置环境变量。 +在构建或者代码在端上运行中需要一些跟区分于环境的变量，用于配置构建流程或者运行时过程，这时候我们可以配置环境变量。 ## 配置环境变量 ### 命令行添加 + 比如： + ```bash # OS X, Linux PORT=3000 fes dev @@ -13,9 +15,10 @@ PORT=3000 fes dev # Windows (cmd.exe) set PORT=3000 && fes dev ``` + 如果要同时考虑 OS X 和 Windows，可借助三方工具 [cross-env](https://github.com/kentcdodds/cross-env) - + ```bash yarn add cross-env --dev @@ -34,106 +37,135 @@ cross-env PORT=3000 fes dev ### `.env` 文件配置 + Fes.js 中约定根目录下以 `.env` 开头的文件为环境变量配置文件。 比如： + ```bash PORT=3000 ``` + 然后执行 + ```bash fes dev ``` + 会以 3000 端口启动 dev server。 #### 本地临时配置 + 可以新建 `.env.local`，这份配置会和 `.env` 做合并后形成最终配置。 #### 环境配置 + 可以通过环境变量 `FES_ENV` 区分不同环境来指定配置，这时候必须在执行命令前添加 `FES_ENV` 保证执行加载环境变量配置文件逻辑前 `FES_ENV` 已设置。 举个 🌰 ： + ```bash FES_ENV=sit fes dev ``` + 如果存在 `.env.sit` 文件，则会将 `.env.sit` 的配置和 `.env` 做合并后形成最终配置。 #### 配置优先级 -本地临时配置 > 环境配置 > 基础配置 +本地临时配置 > 环境配置 > 基础配置 ::: tip 如果多份配置中存在相同的配置项，**则优先级高的会覆盖优先级低的**。 -::: +::: ## 编译时配置列表 + 编译时配置是在构建过程需要的变量，开放给用户配置。 ### FES_ENV + 指定当前的环境，不同环境各自的配置文件。 ::: tip `FES_ENV` 在会在加载`.env`前使用，所以只能用命令行方式配置。 -::: +::: ### FES_PRESETS + 添加额外的插件集入口 ### FES_PLUGINS + 添加额外的插件入口 ### PORT -`fes dev` 时服务指定的端口号，默认是 `8080` + +`fes dev` 时服务指定的端口号，默认是 `8000` ### HOST + 默认是 `localhost`。 ### HTTPS + 默认是 `false`。 ### WATCH + 设为 none 时不监听文件变更。比如： + ``` WATCH=none fes dev ``` ### BABEL_CACHE + 默认开启 Babel 编译缓存，值为 none 时禁用缓存。 ### ANALYZE + 用于分析 bundle 构成，默认关闭。 比如： + ``` ANALYZE=1 fes build ``` ### ANALYZE_MODE + 默认是`server` ### ANALYZE_PORT + 默认是`8888` ### CLEAR_OUTPUT + 仅仅在 `build` 时生效。如果设置为 `none`，就不会在构建前清除 `Output` 文件内容。 ### RM_TMPDIR + 仅仅在 `build` 时生效。如果设置为 `none`，就不会在构建后清除 `.fes` 临时文件内容。 ## process.env + 运行时配置需要以 `FES_APP_` 开头，比如在 `.env` 中配置： + ``` FES_APP_KEY=123456789 ``` + 在代码中使用： + ```js -console.log(process.env.FES_APP_KEY) +console.log(process.env.FES_APP_KEY); // 输出 123456789 ``` 除了用户自定义的以`FES_APP_`开头的变量，还提供如下配置： -- **NODE_ENV**：Node 环境变量 +- **NODE_ENV**：Node 环境变量 -- **FES_ENV**：Fes.js 环境变量 +- **FES_ENV**：Fes.js 环境变量 -- **BASE_URL**：等同于 publicPath \ No newline at end of file +- **BASE_URL**：等同于 publicPath diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md index 75e18253..926b1cbe 100644 --- a/docs/guide/getting-started.md +++ b/docs/guide/getting-started.md @@ -112,7 +112,7 @@ yarn dev yarn run v1.22.4 $ fes dev -Starting the development server http://localhost:8080 ... +Starting the development server http://localhost:8000 ... ✔ Webpack Compiled successfully in 15.91s @@ -129,7 +129,7 @@ Starting the development server http://localhost:8080 ... npm run dev > fes dev -Starting the development server http://localhost:8080 ... +Starting the development server http://localhost:8000 ... ✔ Webpack Compiled successfully in 3.66s @@ -140,7 +140,7 @@ Starting the development server http://localhost:8080 ... -Fes.js 会在 [http://localhost:8080](http://localhost:8080) 启动一个热重载的开发服务器。当你修改你的 .vue 文件时，浏览器中的内容也会自动更新。 +Fes.js 会在 [http://localhost:8000](http://localhost:8000) 启动一个热重载的开发服务器。当你修改你的 .vue 文件时，浏览器中的内容也会自动更新。 home diff --git a/docs/reference/cli.md b/docs/reference/cli.md index 1c7eda5e..364570fe 100644 --- a/docs/reference/cli.md +++ b/docs/reference/cli.md @@ -19,8 +19,8 @@ For more info, run any command with the `--help` flag: $ vuepress info --help Options: - -v, --version Display version number - -h, --help Display this message + -v, --version Display version number + -h, --help Display this message ``` ## dev @@ -32,17 +32,17 @@ Usage: $ vuepress dev [sourceDir] Options: - -c, --config Set path to config file - -p, --port Use specified port (default: 8080) - -t, --temp Set the directory of the temporary files - --host Use specified host (default: 0.0.0.0) - --cache Set the directory of the cache files - --clean-temp Clean the temporary files before dev - --clean-cache Clean the cache files before dev - --open Open browser when ready - --debug Enable debug mode + -c, --config Set path to config file + -p, --port Use specified port (default: 8000) + -t, --temp Set the directory of the temporary files + --host Use specified host (default: 0.0.0.0) + --cache Set the directory of the cache files + --clean-temp Clean the temporary files before dev + --clean-cache Clean the cache files before dev + --open Open browser when ready + --debug Enable debug mode --no-watch Disable watching page and config files (default: true) - -v, --version Display version number + -v, --version Display version number -h, --help Display this message ``` @@ -59,14 +59,14 @@ Usage: $ vuepress build [sourceDir] Options: - -c, --config Set path to config file - -d, --dest Set the directory build output (default: .vuepress/dist) - -t, --temp Set the directory of the temporary files - --cache Set the directory of the cache files - --clean-temp Clean the temporary files before build - --clean-cache Clean the cache files before build - --debug Enable debug mode - -v, --version Display version number + -c, --config Set path to config file + -d, --dest Set the directory build output (default: .vuepress/dist) + -t, --temp Set the directory of the temporary files + --cache Set the directory of the cache files + --clean-temp Clean the temporary files before build + --clean-cache Clean the cache files before build + --debug Enable debug mode + -v, --version Display version number -h, --help Display this message ``` diff --git a/docs/reference/config/README.md b/docs/reference/config/README.md index ff71b4e7..e800cdb0 100644 --- a/docs/reference/config/README.md +++ b/docs/reference/config/README.md @@ -96,6 +96,20 @@ export default { 然后你代码里写 `console.log(__DEV__)`，会被编译成 `console.log('development')`。 +### builder + +- 类型： `string` +- 默认值： 当前安装的 builder +- 详情： + 比如 dev 用 vite，构建用 webpack +- 示例： + +```js +export default { + builder: 'webpack', +}; +``` + ### dynamicImport - 类型： `boolean`