1. clone 项目: github: https://github.com/zuihou/zuihou-ui.git github: https://github.com/zuihou/zuihou-admin-ui.git ~~~ ## 版本参考, ps: 理论上: node 大于 8.10.x 就行,但最好当前比较新的稳定版 10.x.x 11.x.x 12.x.x node -v v10.16.3 npm -v 6.9.0 cnpm -v cnpm@6.1.0 (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js) npm@6.11.3 (/usr/local/lib/node_modules/cnpm/node_modules/npm/lib/npm.js) node@10.16.3 (/usr/local/bin/node) npminstall@3.23.0 (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js) prefix=/usr/local darwin x64 17.5.0 registry=https://r.npm.taobao.org ~~~ 2. 修改前端配置文件 `.env.development` : ~~~ # 后端为 zuihou-admin-cloud 项目: http://127.0.0.1:8760 表示zuihou-gateway-server服务的访问地址,非本机访问,请配置内网ip # 后端为 zuihou-admin-boot 项目: http://127.0.0.1:8760 表示zuihou-authority-server服务的访问地址,非本机访问,请配置内网ip VUE_APP_DEV_REQUEST_DOMAIN_PREFIX = 'http://127.0.0.1:8760' # 请求域名前缀, 该变量仅仅生产环境需要设置 VUE_APP_PROD_REQUEST_DOMAIN_PREFIX = '' # URI 前缀,用于根据URI前缀进行代理 VUE_APP_BASE_API = '/api' # 是否启用多租户 VUE_APP_IS_MULTI_TENANT = true # 是否启用验证码 VUE_APP_IS_CAPTCHA = true # 客户端秘钥(这里配置明文,且zuihou-ui 和 zuihou-admin-ui 配置不同) VUE_APP_CLIENT_ID=zuihou_ui VUE_APP_CLIENT_SECRET=zuihou_ui_secret ~~~ 3. 修改 vue.config.js 文件 ~~~ proxy: { [proxyUrl]: { target: targetUrl, changeOrigin: true, pathRewrite: { // zuihou-admin-cloud 项目 请使用以下的配置 ['^' + proxyUrl]: proxyUrl // zuihou-admin-boot 项目 请使用以下的配置 // ['^/api/oauth']: '/', // ['^/api/authority']: '/', // ['^/api/file']: '/', // ['^/api/msgs']: '/', // ['^/api/gateway']: '/gateway', // ['^/api/gate']: '/', } } } ~~~ 4. 安装 ~~~ npm install --registry=https://registry.npm.taobao.org 上面的命令报错? 就用淘宝镜像吧... # 安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install --registry=https://registry.npm.taobao.org ~~~ 3. 启动 ~~~ npm run dev ~~~ 4.有报错怎么办? ``` 逐个试试下面的方法: npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ git config --global url."https://".insteadOf git:// npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver cnpm install core-js@2.6.9 --prefix G:\github\zuihou-ui cnpm install core-js@2.6.9 还不行?学会搜索吧... 我也不知道如何解决。 ``` 5. 访问 [http://localhost:8080/#/home](http://localhost:8080/) 6. 生产环境直接构建 ~~~ npm run build:prod ~~~ 7. 构建生产环境的镜像 ~~~ 安装docker后,执行: ./build.sh ~~~ build.sh 脚本预览: ~~~ #!/usr/bin/env bash cnpm install npm run build:docker docker build -t zuihou-ui . ~~~ 8. 运行生产环境的镜像 ~~~ 将run.sh文件中 DOCKER_REQUEST_DOMAIN_PREFIX 的值修改成后端服务的访问前缀 构建镜像完毕后,直接运行 ./run.sh ~~~ run.sh 脚本预览: ~~~ #!/bin/bash cur_dir=`pwd` docker stop zuihou_ui docker rm zuihou_ui docker run --name zuihou_ui --restart=always \ -p 10000:80 \ -e DOCKER_REQUEST_DOMAIN_PREFIX=http://tangyh.top:10000 \ -e NGINX_HOST=localhost \ -e TZ=Asia/Shanghai \ -d zuihou-ui:latest # 启动项目时, 请将:DOCKER_REQUEST_DOMAIN_PREFIX替换成自己的后端服务(不能用127.0.0.1和localhost)。 NGINX_HOST替换成nginx服务器的IP或者域名 ~~~