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

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

React 入门系列教程导航

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


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

将项目打包到根目录运行

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

npm run build

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

上图是编译过程,我们编译的文件如下:

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

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

将项目打包到子目录

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

在 package.json 中配置子目录

首先,我们打开 package.json 文件,在其中添加:

"homepage": "/love/",

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

配置路由文件

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

如下图所示:

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

修改 @/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 原创,允许转载,但转载必须保留首发链接。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在,都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多程序园信息
开发小院