ExtJS项目打包部署:雪庐小酒学ExtJS

雪说

之前写过的一篇关于ExtJS + Java的部署。不过当时还不知怎么去打包ExtJS 程序,所以把整个ExtJS的项目上传了上去。具体的过程可以看我上一篇的博客。

这回将介绍真正的打包发布的方式,主要有两个过程,一个是打包(后面介绍)另外一个就是部署(博客链接)

打包

打包,是将ExtJS的项目(此处单指,使用官方模板以命令行的方式生成的项目)文件。经过处理之后,只保留有效的部分,其余的都压缩,形成的小的压缩包文件。可以大大的减少浏览器的加载时间。

过程很简单,不过需要几个步骤:

第一步:打testing包,检测缩写项目中是否缺少依赖组件

打开cmd进入项目所在的文件夹。使用命令

sencha app build testing

         对程序打testing包(对这个有疑问请查看我之前的博客)

当出现以下这种情况之后,便说明打包已经结束就可以进行测试了。

不过需要注意的是,需要配置Nginx将原本加载整个项目文件跟目录的路径导向这里

因为程序的入口是index.html所以必须将路径设置到这个目录下面。

上图是我的Nginx核心配置,当然你需要替换掉root的根目录。想必不用多说。

第二步:运行程序

你会发现什么都加载不出来,而且还会出现这种错误:

Uncaught Error: [Ext.createByAlias] Unrecognized alias: interaction.itemhighlight

一般情况下,我所遇到的都是这种样式的错误,是因为缺少requires 类导致的。

此时就需要去这里:

如图所示找到相应的类。

将这个类添加到你项目中的:requires[ “Ext.chart.interactions.ItemHighlight”] 中,再次进行第一步操作即可。

第三步:打成production包

当你第二步把每个页面缺少的requires都补全之后,就需要使用

sencha app build production

这个命令,进行打包。因为使用testing虽然打包,但是ExtJS页面运行的js依赖组件并没有被压缩。浏览器加载的数据包仍然会有点多。而使用production之后,就会将依赖的js组件也给打包。

此时生成的

只需要适应build下production文件夹的东西就行了。此时就可以把这个build里面的东西当成最终的发布文件,放在服务器上面了。

如有疑问,请在下方留言。

原文地址:https://www.cnblogs.com/lightsnowy/p/8984784.html

时间: 2024-08-07 04:11:56

ExtJS项目打包部署:雪庐小酒学ExtJS的相关文章

雪庐小酒学ExtJS(一):ExtJS 6.2 项目搭建

一.  安装: (创建的前提是必须是电脑的环境中有java和tomcat才行,在ExtJS6.2就不需要再装ruby) 下载两个压缩包:分别是 ext-6.2.0-gpl(这个是Extjs 的sdk文件,创建新项目的时候需要用). SenchaCmd-6.5.2-windows-64bit (这个下载下来是解压,或者不解压.反正最后看到的是一个.exe 结尾的安装文件 ,直接安装运行即可PS:一定要记住安装到哪个文件夹下面了) 二.  运行: 安装好SenchaCmd-6.5.2-windows

vue项目打包部署生产环境

vue项目打包部署生产环境 打包部署生产环境之前需要修改配置文件: 修改一:build > utils.js  (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 修改二:config > index.js (修改assetsPublicPath:'./' ,修改目的是为了解决js找不到的问题) 两个文件修改完成之后,运行命令:npm run build 打包直接访问dist文件夹中的index.html即可. 原文地址:https:

vue项目打包部署-----解决打包后访问资源失败问题

vue项目打包部署-----解决打包后访问资源失败问题. 本文链接:https://blog.csdn.net/kaola_l/article/details/80497490 打包之前需要修改如下配置文件: 配置文件一:build>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 配置文件二:config>>index.js(修改assetsPublicPath:'./' ,修改目的是为了解决js找

yo angualr-fullstatck 项目打包部署

yoeman使用grunt进行打包部署,直接运行grunt命令即可,期间会对代码进行检查,如果存在不规范的地方jshint会指定出来. grunt会对静态资源进行打包而且对资源文件名进行了MD5作为版本戳. 1:修改server/app.js配置文件 //process.env.NODE_ENV = process.env.NODE_ENV || 'development'; process.env.NODE_ENV = 'production';//生产环境 使用grunt打包生成目标应用时,

Eclipse中的WEB项目打包部署到tomcat

1.在eclipse中右键单击项目,然后Export选择WAR file,生成项目的WAR文件.(路径中的项目名要与打包项目一样) 2.把生成的WAR文件放到tomcat解压之后的webapps文件夹下. 3.在tomcat的conf文件夹里的server.xml进行配置: 在<Host></Host>标签之间添加如下代码: <Context path="/" docBase="F:/tomcat/webapps" debug=&quo

Vue项目打包部署到apache服务器

vue项目在开发环境下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器. 但是在服务器上就不是这样的,必须要通npm run build命令来对整个项目进行打包,打包后会在项目目录下生成一个dist文件夹,内容如下: 然后就是把这些文件丢到服务器上的某个文件夹下,我这里的文件夹名字是ibms 遇到的问题: 1. 直接去访问http://www.xxx.com/ibms/,会发现网页是白屏的,什么都没有,这就比较奇怪了,其实是因为资源加载的路径有问题!

vue项目打包部署elementUI的字体图标丢失问题

自己搭建的Vue项目,没有使用vue-cli,引入elementUI时,使用的是webpack直接打包工具,发现字体图标丢失你 记录一下解决办法: webpack module配置:(build目录下webpack.base.conf.js文件) { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].

Docker Compose 项目打包部署

Docker Compose 前面我们使用 Docker 的时候,定义 Dockerfile 文件,然后使用 docker build.docker run 等命令操作容器.然而微服务架构的应用系统一般包含若干个微服务,每个微服务一般都会部署多个实例,如果每个微服务都要手动启停,那么效率之低,维护量之大可想而知使用 Docker Compose 可以轻松.高效的管理容器,它是一个用于定义和运行多容器 Docker 的应用程序工具 Docker 和 Compose兼容性看下图:          

记录idea maven项目打包部署web项目mapper扫描失败

最开始以为这里出了问题,后来加上以后还是不能把mapper.xml打包进去 这是报的异常信息 Mybatis启动老是报绑定错误(找不到Mapper对应的 SQL配置),经过一番Google未能解决问题(大家都说是XML没写对之类的),根本就没有怀疑到漏掉XML文件,最后迫不得已,去查看了下 Maven打包后的war文件,才找到问题.废话不多说,解决方式是,在pom.xml文件中的build节点中,添加如下代码: <build> <resources> <resource>