React + webpack 开发单页面应用简明中文文档教程（十一）将项目打包到子目录运行

今天药忘吃喽~ 2022-05-21 02:51 155阅读 0赞

# React + webpack 开发单页面应用简明中文文档教程（十一）将项目打包到子目录运行 #

## React 入门系列教程导航 ##

[React + webpack 开发单页面应用简明中文文档教程（一）一些基础概念][React _ webpack]  
[React + webpack 开发单页面应用简明中文文档教程（二）创建项目][React _ webpack 1]  
[React + webpack 开发单页面应用简明中文文档教程（三）目录说明以及调整项目构架文件][React _ webpack 2]  
[React + webpack 开发单页面应用简明中文文档教程（四）调整项目文件以及项目配置][React _ webpack 3]  
[React + webpack 开发单页面应用简明中文文档教程（五）配置 api 接口请求文件][React _ webpack _ api]  
[React + webpack 开发单页面应用简明中文文档教程（六）渲染一个列表，初识 jsx 文件][React _ webpack _ jsx]  
[React + webpack 开发单页面应用简明中文文档教程（七）jsx 组件中调用组件、父组件给子组件传值][React _ webpack _jsx]  
[React + webpack 开发单页面应用简明中文文档教程（八）Link 跳转以及编写内容页面][React _ webpack _Link]  
[React + webpack 开发单页面应用简明中文文档教程（九）子组件给父组件传值][React _ webpack 4]  
[React + webpack 开发单页面应用简明中文文档教程（十）在 jsx 和 scss 中使用图片][React _ webpack _ jsx _ scss]  
[React + webpack 开发单页面应用简明中文文档教程（十一）将项目打包到子目录运行][React _ webpack 5]

--------------------

好，前面我们经过一系列的开发，已经掌握了一些内容了。这篇博文，我们要学习，如何将项目打包。

## 将项目打包到根目录运行 ##

如果我们需要将项目打包到根目录运行，这个就非常非常简单了。我们只需要运行

npm run build

命令，然后，等待编译，过会儿就编译好，并将我们的文件寸在了 `build` 目录，我们将编译出来的文件交给运维去部署就可以了。

![2556a200a219753caf071e376bc726.jpg][]

上图是编译过程，我们编译的文件如下：

![0f9f75ae28e51745da47462745545d.jpg][]

很清楚，图片是图片，样式是样式，脚本是脚本。很合适。

问题是，我们如果要部署到子目录，怎么办？

## 将项目打包到子目录 ##

将项目打包到子目录，我们需要经过若干配置。我这边以我们要打包到 `/love/` 这个目录下面为例，举例说明，我们需要怎么处理。

### 在 package.json 中配置子目录 ###

首先，我们打开 `package.json` 文件，在其中添加：

"homepage": "/love/",

![d06edf602a1300cda73d2cd25bf75d.jpg][]

`react` 的脚手架和 `vue` 的脚手架有所不同，就是，很多的设置，都是在 `package.json` 中进行配置的。没有什么优劣，习惯了就好。

### 配置路由文件 ###

除了在上面的文件中配置，我们还需要调整路由，我们需要将 `Router` 中的 `basename` 参数修改 `/love/` 这样才可以。

如下图所示：

![2c04cdec6bcde8a3584857bdccba17.jpg][]

好，这样，我们就配置完成了。

### 修改 @/tool/path.js 文件 ###

上一章中，我们学习了如何在 `react` 中引入图片，并且，我们使用了 `@/tool/path.js` 这个程序来处理生产环境和开发环境的图片不同前缀，这里，我们就需要来进行处理了。

const NODE_ENV = process.env.NODE_ENV
    export default (src) => {
      let prod_fix = '/love'
      let img_fix = '/image/'
      return NODE_ENV === 'production' ? prod_fix + img_fix + src : img_fix + src
    }

如上，修改 `prod_fix` 的前缀为 `/love` ，然后就可以了。

### 修改 @/style/style.scss 文件 ###

上一章中，我们也说了相关的内容，这里我们再来演示一下：

$res: "/love/image/"; // 打包时用此路径
    // $res: "/image/"; // 本地开发是用此路径

调整为这样，即可。上面的三个，我们只需要处理一次，唯独这个 sass 文件，我们需要每次打包的时候都修改一下，开发的时候再修改回来。这样。

### 打包 ###

经过上面的配置之后，我们就可以运行我们的打包命令了。`npm run build`，打包完成之后，将 `build` 中的文件，交给我们的运维部署。

## Nginx 配置补充说明 ##

这部分是补充给运维同学看的，他也不一定能用到。但是如果访问出现了问题，可以让他看下下面的配置。希望对他有所帮助。具体内容我就不阐述了。

location /marketing {
                index index.html;
                alias /srv/apps/huanqiu-marketing-h5-dist/build/;
                proxy_set_header X-Real-IP  $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header Host $http_host;
                proxy_redirect off;
                if (!-e $request_filename) {
                          rewrite ^/(.*) /marketing/index.html last;
                          break;
                      }
          }

## 其他补充 ##

其实这个事情并不复杂，只是相关的资料都比较琐碎。希望大家跟着我敲了一遍代码之后，都已经入门了 `react` 开发了。祝大家愉快。

后面，我会随时补充一些其他的相关内容，大家有兴趣，希望可以关注这个系列的博文。

多多点赞呀！

本文由 FungLeo 原创，允许转载，但转载必须保留首发链接。

[React _ webpack]: http://blog.csdn.net/fungleo/article/details/80841159
[React _ webpack 1]: http://blog.csdn.net/fungleo/article/details/80841181
[React _ webpack 2]: http://blog.csdn.net/fungleo/article/details/80841200
[React _ webpack 3]: http://blog.csdn.net/fungleo/article/details/80841220
[React _ webpack _ api]: http://blog.csdn.net/fungleo/article/details/80841241
[React _ webpack _ jsx]: http://blog.csdn.net/fungleo/article/details/80841255
[React _ webpack _jsx]: http://blog.csdn.net/fungleo/article/details/80841263
[React _ webpack _Link]: http://blog.csdn.net/fungleo/article/details/80841274
[React _ webpack 4]: http://blog.csdn.net/fungleo/article/details/80841290
[React _ webpack _ jsx _ scss]: http://blog.csdn.net/fungleo/article/details/80841296
[React _ webpack 5]: http://blog.csdn.net/fungleo/article/details/80841308
[2556a200a219753caf071e376bc726.jpg]: /images/20220521/93b42a9b240e4ae680baa312108e1f06.png
[0f9f75ae28e51745da47462745545d.jpg]: /images/20220521/49dfb7b14597491cafc3849b4c4b8aee.png
[d06edf602a1300cda73d2cd25bf75d.jpg]: /images/20220521/26f4b13527ac4b03888ee7d7ca4aeb55.png
[2c04cdec6bcde8a3584857bdccba17.jpg]: /images/20220521/d1095d6726e645cfb8e2eec502900a8d.png