前端踩坑

当项目开发完毕，构建打包文件只需要一个命令 umi build，构建打包成功之后，会在根目录生成 dist 文件夹，里面就是构建打包好的文件，通常是 *.js、*.css、index.html 等静态文件。

如果需要自定义构建，比如指定 dist 目录等，可以通过 config/config.ts 进行配置

npm run build:prod
构建出来的是生产环境的应用
生成的包会比较小

npm run build:stage

NODE_ENV=production
构建出来的也是测试环境的应用
NODE_ENV=staging
如果不存在.env.staging配置文件，打包命令仍然可以正常执行，但是在构建的过程中不会加载.env.staging文件中定义的环境变量和配置信息，这就意味着需要手动在代码中定义一些针对staging环境的配置

如果你在代码中使用了 process.env 来获取环境变量和配置信息，而没有先进行检查或设置默认值，那么当 .env.staging 文件不存在时，可能会出现一些错误或异常。因此，建议在代码中进行检查并设置默认值，以避免这种情况的发生。

另外需要注意的是，如果你在 vue.config.js 中使用了 configureWebpack 或 chainWebpack 等方法来进行自定义构建配置，那么在构建 staging 环境时，可能需要手动加载一些针对 staging 环境的配置文件或插件，以确保构建过程的正常进行

可以使用process.env.NODE_ENV来查看当前的打包环境

但是使用npm run build:stage构建出来的包会比较大，且F12查看源代码，会看到源代码，易于测试人员测试，但发布的话，会泄露源码

注意：

如果在 .env.staging 文件中将 NODE_ENV 的值设置为 production，那么在使用 vue-cli-service build --mode staging 命令构建项目时，NODE_ENV 的值将被覆盖为 production，而不是 staging

建议在 .env.staging 文件中将 NODE_ENV 的值设置为 staging，以确保构建过程中加载正确的环境配置文件和资源。如果你需要使用不同的 NODE_ENV 值来进行构建，可以使用 --mode 选项来指定不同的构建模式，例如 vue-cli-service build --mode production

 

哈希路由（hash模式）和历史路由（history模式）

hash模式

 history模式

 

但是，去除#号的话，需要注意一个情况，即NG的配置要调整，否则会出现页面刷新之后就404的问题，例如以下场景：

访问http://172.18.169.189:83-》ng去找index.html-》http://172.18.169.189:83/index.html-》对应的业务页面http://172.18.169.189:83/login。

此时执行刷新功能：http://172.18.169.189:83/login-》nginx识别到url路径中的login，去找匹配，找不到-》404

ant design pro的开启和关闭方式，最好开启hash模式，不然部署有点麻烦

官方资料：https://umijs.org/docs/api/config#hash