前端部署项目

请求地址:
  开发环境:localhost:8000
  线上环境:user-backend.code-nav.cn

startFront(env) {
    if(env === 'prod') {
        // 不输出注释 
        // 项目优化
        // 修改请求地址
    } else {
        // 保持本地开发逻辑
    }
}

用了 umi 框架,build 时会自动传入 NODE_ENV == production 参数,start NODE_ENV 参数为 development
启动方式
开发环境:npm run start(本地启动,监听端口、自动更新)
线上环境:npm run build(项目构建打包),可以使用 serve 工具启动(npm i -g serve)
       项目的配置 不同的项目(框架)都有不同的配置文件,umi 的配置文件是 config,可以在配置文件后添加对应的环境名称后缀来区分开发环境和生产环境。参考文档:https://umijs.org/zh-CN/docs/deployment
开发环境:config.dev.ts
生产环境:config.prod.ts
公共配置:config.ts 不带后缀

umi框架中有build来方便我们构建

前端部署项目_第1张图片

可以看到每个文件的大小,后面需要优化可以根据这个做依据

前端部署项目_第2张图片

之后会生成一个dist文件,相当于帮我们对项目进行了优化

前端部署项目_第3张图片

判断是否为生产环境:

前端部署项目_第4张图片

用serve去运行下线上的项目

1.先切换到dist项目

2.输入sreve命令

点开项目这是我们的请求全部变为了线上地址

前端部署项目_第5张图片

最后放到服务器里

你可能感兴趣的:(前端,javascript,开发语言)