直接用 laravel ui 以及 webpack.mix.js 来打包编译纯 vue 项目，也会出现尴尬场面。比如，使用的路由问题，根目录问题以及路由的 rowserHistory 和 hashHistory 选择上，都会出现尴尬情况。如果只是单纯的后台，非根目录项目，还不如独立建立一个文件夹，来组织打包来的爽快。
分类目录
很多情况下，我们都想将 react 编译的项目部署到非跟目录。可默认就必须是根目录，怎么实现呢。
操作一波
找到 package.json 文件，仅仅在package.json 文件中加入一行 "homepage":".", 即可。 如下。
{
…
"private": true,
"homepage":".",
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"axios": "^0.19.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
…
}
网上还有一种方法，将配置文件暴露出来。执行 npm run eject ，然后修改配置。但感觉这方法比较麻烦，也没弄通过。
如果仅仅是想部署到非跟目录，第一种方法最省事了。
更有意义
https://www.jb51.net/article/158194.htm
https://segmentfault.com/a/1190000018593030
https://blog.csdn.net/zhaolandelong/article/details/78468842
为了早点体验到 ant design pro 的页面，注释了部分配置，显示出了 welcome 页面。可是当你刷新页面时候，到你面前的就是 404 。这里，就要先解决 404 问题。
Ant Design Pro 使用的 Umi 支持两种路由方式：browserHistory 和 hashHistory。默认就是 browserHistory。这样漂亮好看。而默认就是这种方式。具体请看：
虽然这种方式漂亮好看。可对于解析认识是个问题。需要服务端进行处理。因为只使用过 nginx，这里就说下 nginx 下的解决方法。
找到对应的 nginx 的配置文件，并修改文件。
如果 ant design pro 编译后的文件直接在根目录下，可以在配置文件中增加
location / {
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
如果 ant design pro 编译后的文件不再根目录下（比如在 dashboard 下），可以在配置文件中增加
location /dashboard {
index index.html index.htm;
try_files $uri $uri/ /dashboard/index.html;
}
然后保存重启 nginx ，再刷新页面，发现不再是 404 了。
nginx -s reload
homestead 中，虚拟机里的配置文件在 /etc/nginx/sites-available/ 下，可以单独修改，重启。但这样重启后，会再生。清理的脚步在本地的 Homestead 的 scripts/clear-nginx.sh 中。如果单独对某个域名处理，最好在本地的 scripts/site-types/ 下新建配置，然后 Homestead.yml 文件中，对具体域名指定配置。
多的话就不说了，具体还是 nginx 的修改配置。 至于 nginx 的 try_files 是什么意思了，可以了解下。
try_files 的核心目的就是替代。比如，
location /dashboard {
index index.html index.htm;
try_files $uri $uri/ /index.php?q=$uri&$args;
}
以 根目录（对应站点的根目录）下的 dashboard 目录为参照，先查找第一个节点，看文件是否存在，如果不存在再看文件夹（有斜杠）是否存在，如果再不存在，就指向到第三个参数。
比如具体的 url 是这样的。
https://www.mlxiu.com/dashboard/love
它会先检查 love 这个文件是否存在,如果不存在 love 这个文件则检查 love 这个文件夹。当然，文件的后缀，上边已先列出。
具体看 nginx 的 try_files
module.exports,exports,export和export default,import与require区别与联系
在用webpack打包的时候，所打包的文件，会经常使用到 module.exports,exports,export和export default,import与require 这些语法。看起来眼花缭乱，其实，都是有迹可循的。
基本问题
- module.exports 和 exports 是属于 CommonJS 模块规范。
-
export 和 export default 是属于 es6 语法。
-
module.exports 和 exports、export 和 export default 都是导出模块。 import 和 require 则是导入模块。
module.exports 和 exports 的区别与联系
Node应用由模块组成，采用CommonJS模块规范。根据这个规范，每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。
CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。
继续阅读