非你网

直接用 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

https://www.cnblogs.com/lishanlei/p/9550622.html

为了早点体验到 ant design pro 的页面，注释了部分配置，显示出了 welcome 页面。可是当你刷新页面时候，到你面前的就是 404 。这里，就要先解决 404 问题。

Ant Design Pro 使用的 Umi 支持两种路由方式：browserHistory 和 hashHistory。默认就是 browserHistory。这样漂亮好看。而默认就是这种方式。具体请看：

https://pro.ant.design/docs/deploy-cn#%E5%89%8D%E7%AB%AF%E8%B7%AF%E7%94%B1%E4%B8%8E%E6%9C%8D%E5%8A%A1%E7%AB%AF%E7%9A%84%E7%BB%93%E5%90%88

虽然这种方式漂亮好看。可对于解析认识是个问题。需要服务端进行处理。因为只使用过 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

https://blog.csdn.net/a519640026/article/details/9138329

https://www.cnblogs.com/boundless-sky/p/9459775.html

在用webpack打包的时候，所打包的文件，会经常使用到 module.exports,exports,export和export default,import与require 这些语法。看起来眼花缭乱，其实，都是有迹可循的。

基本问题

1. module.exports 和 exports 是属于 CommonJS 模块规范。

2. export 和 export default 是属于 es6 语法。

3. 同样 import 和 require 分别属于 es6 和 CommonJS。

4. module.exports 和 exports、export 和 export default 都是导出模块。 import 和 require 则是导入模块。

module.exports 和 exports 的区别与联系

Node应用由模块组成，采用CommonJS模块规范。根据这个规范，每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。
继续阅读