95 lines
2.1 KiB
Markdown
95 lines
2.1 KiB
Markdown
简体中文 | [English](../../en/develop/1-ready-to-work.md)
|
||
|
||
# 开发前准备
|
||
|
||
- node 环境
|
||
- package.json 中要求：`"node": ">=10.22.0"`
|
||
- 验证 nodejs 版本
|
||
|
||
```shell
|
||
node -v
|
||
```
|
||
|
||
- yarn
|
||
- 安装 yarn
|
||
|
||
```shell
|
||
npm install -g yarn
|
||
```
|
||
|
||
- 安装依赖包
|
||
- 在项目根目录下执行，即`package.json`同级，需要耐心等待安装完成
|
||
|
||
```shell
|
||
yarn install
|
||
```
|
||
|
||
- 准备好可用的后端
|
||
- 准备好可访问的后端，举个例子：https://172.20.154.250
|
||
- 修改`config/webpack.dev.js`中的相应配置：
|
||
|
||
```javascript
|
||
if (API === 'mock' || API === 'dev') {
|
||
devServer.proxy = {
|
||
'/api': {
|
||
target: 'https://172.20.154.250',
|
||
changeOrigin: true,
|
||
secure: false,
|
||
},
|
||
};
|
||
}
|
||
```
|
||
|
||
- 配置访问的 host 与 port
|
||
- 修改`devServer.host`与`devServer.port`
|
||
- 修改`config/webpack.dev.js`中的相应配置
|
||
|
||
```javascript
|
||
const devServer = {
|
||
host: '0.0.0.0',
|
||
// host: 'localhost',
|
||
port: 8088,
|
||
contentBase: root('dist'),
|
||
historyApiFallback: true,
|
||
compress: true,
|
||
hot: true,
|
||
inline: true,
|
||
disableHostCheck: true,
|
||
// progress: true
|
||
};
|
||
```
|
||
|
||
- 搭建完成
|
||
- 在项目根目录下执行，即`package.json`同级
|
||
|
||
```shell
|
||
yarn run dev
|
||
```
|
||
|
||
- 使用`config/webpack.dev.js`中配置的`host`与`port`访问即可，如`http://localhost:8088`
|
||
- 开发使用的前端实时更新环境搞定。
|
||
|
||
# 生产环境使用的前端包
|
||
|
||
- 具备符合要求的`nodejs`与`yarn`
|
||
- 在项目根目录下执行，即`package.json`同级
|
||
|
||
```shell
|
||
yarn run build
|
||
```
|
||
|
||
- 打包后的文件在`dist`目录，交给部署相关人员即可。
|
||
|
||
# 测试使用的前端包
|
||
|
||
- 具备符合要求的`nodejs`与`yarn`
|
||
- 在项目根目录下执行，即`package.json`同级
|
||
|
||
```shell
|
||
yarn run build:test
|
||
```
|
||
|
||
- 打包后的文件在`dist`目录
|
||
- 注意！！！这个测试包为了测出代码覆盖率的
|
||
- 建议使用 nginx，以完成带有代码覆盖率的 E2E 测试。
|