环境配置看很久之前的第一次建站

今天在踩完阿里云环境部署相关坑后终于来到了激动人心的时刻–把degree项目部署到服务器上,然后在服务器上跑,想想就激动！
以前有在服务器上放项目的经验,不过那是jsp而且是公司自己的服务器,我总想着我也要搞搞这样才能出去吹牛。
这不,degree项目是使用vue开发和webpack打包的,为了避免踩坑,特地问了苍老师,苍老师说你先在本地npm run build打包好,然后在eclipse里面导出war包放到服务器上tomcat文件夹下面的webapps文件夹下即可。
看看,多么easy~
然后我就踩坑了。。。放上去怎么访问也找不到一直报404。。。
然后开始走神,神游太虚后到下午,嗯,想到把以前项目放上去看看有没有用,发现后台的确在解析,服务器应该没问题,只是该死的测试组把数据库设置成了外网无法访问,我擦擦擦擦擦擦擦擦。
然后我换了个项目,可以运行,服务器没问题,那么只能是我项目配置问题或者我的webpack配置问题了。
因为一开始开发就想试试前台用8088端口,tomcat用8080端口跨域锻炼自己的,所以本地npm start直接是localhost:8989就有了,对,你没看错,连项目名都没有,后来打开来公司的第一个项目也就是用react开发的,发现它也是这样的。
这,我只好又问苍老师了,结果他说他打包好后就是把文件夹放到服务器tomcat的webapps下面的,然后就能跑了。
why I can’t ???

由于我本地打开也没有项目名就能访问了,但是打开服务器ip:8080却是tomcat页面,我很没辙。然后胡乱搜索吧,找到个帖子webpack打包后该如何访问项目？

链接：https://www.cnblogs.com/camille666/p/after_webpack.html

      这篇博客是想访问webpack打包后的项目,其实我也不会,而我需要的就是在服务器上访问打包后的项目,所以便照着试了下,能用,虽然没有解决我的问题,但好歹学到东西了。

      找了很久,依然没辙,可以看出我真的很弱鸡,但是我这些坑踩完的话怎么说也算中级开发迈进了一步,一步一步稳扎稳打嘛。
      接下来只好去：http://vuejs-templates.github.io/webpack/static.html 这里找,也就是config文件夹下的index.js文件的顶部链接。
这里讲到了处理静态资源方面的内容。(我翻译下)
      首先,使用vue-cli搭建的项目可以看到src/assets和static/.两个静态资源文件夹,它们是有区别的。(233333,两名字都不一样,没区别才怪呢,你不说我都不知道它们都是静态资源)

webpack的资源

      这里提到所有的模板和css都依赖于vue-html-loader和css-loader查找资源路径解析。它还举了个例子,<img src="./logo.png">和background: url(./logo.png)中的./logo.png是一个相对资源路径并且会被webpack当做一个module依赖释放。
      因为,./logo.png并不是js,当被当做module依赖时,我们需要使用url-loader和file-loader处理。模板已经为我们配置好了这些,所以你可以免费的得到一些例如文件指纹和以base64内联为条件的特征(这句话不是很懂),当能够使用相对的或者moudule路径而不用担心发布问题。
      自从这些资源在build过程中可能会被内联或复制或重命名,它们基本上是你源代码的一部分。这就是为什么推荐把webpack处理的静态资源放在/src文件夹下,与其他源文件并列。事实上,你不得不把它们所有的都放在/src/assets：您可以基于模块/组件使用它们来组织它们。举个例子,你可以把每个组件放在它自己的目录下,同时它的静态资源就在它旁边。

资源释放规则

• 相对路径,举例：./assets/logo.png将被当成一个模块依赖解析。它们会被自动替换路径基于你的webpack output配置。
• 非前缀的路径,举例：assets/logo.png将和相对路径一样对待,并且翻译成./assets/logo.png。
• 前缀带~的路径被当成模块请求,类似require(‘some-module/image.png’)。如果你想杠杆的调动webpack的模块解决配置你需要用到这个前缀。举例：如果你有assets的一个解析别名,你需要使用<img src="~assets/logo.png">来确保这个别名得到尊重。
• 根相对路径,举例：/assets/logo.png 不会被处理.

  js中得到资源路径

  为了让webpack返回正确的资源路径,你需要使用require('./relative/path/to/file.jpg'),由file-loader来处理并且返回解析的路径。举例：

  1 2 3 4 5

  computed: { background () { return require('./bgs/' + this.id + '.jpg') } }

注意上面的例子在最终build时将把在./bgs/下每个图片都包含。这是因为webpack不能猜测它们中的哪个在运行时会被使用,所以干脆把他们全包含在内。

“Real”静态资源

相比较下,static/下的文件不会被webpack处理：它们正确的被复制到目的地伴随着相同的文件名。你必须参考这些文件使用绝对路径,绝对路径在config.js中的build.assetsPublicPath 和 build.assetsSubDirectory定义。
举例：

1
2
3
4
5
6
7
8

// config/index.js
module.exports = {
  // ...
  build: {
    assetsPublicPath: '/',
    assetsSubDirectory: 'static'
  }
}

      任何放在static/下的文件应该参考使用绝对定位/static/[filename]的形式。如果你把assetSubDirectory的值改为assets,然后这些路径将需要被改成/assets/[filename]。

翻译结束,嗯,学到不少,但是好像不是这个问题。。。

网上又看到了这个问题：webpack+react打包后的文件如何在Apache服务器上部署？感觉很接近！

地址：https://segmentfault.com/q/1010000007320935/a-1020000007321242
看完似懂非懂的样子。

      研究了一天了,突然把其他项目放上去启动tomcat会打印一大串东西,唯独我的项目放上去什么都不打印,终于发现了问题所在。然后我尝试在本地启动项目,果然,本地启动项目也是,后台会打印与项目相关的东西,但是服务器上没有,说明服务器上的tomcat根本没有解析这个项目！！！
怎么办？
      百度吧,这估计是后台环境配置问题,当时偷懒没有看springMVC环境配置,现在踩坑了。
问了下苍老师,苍老师说你先看看能不能调服务器上的后台接口,如果能调就说明静态资源有问题,不能调说明配置有问题。到底是老江湖！
      不过我仔细想了想,如果真的是配置有问题,那么本地调接口也应该失败啊。
      我重新打了个包放到服务器上,能调后台接口,我日！！！说明项目后台配置没问题,那就肯定是静态资源的问题！！！缩小范围了,真的不容易,我思考了一天了,我TMD又看到了希望！！！！！！

解决了。。。

      时间来到了2018-01-11,距离我踩服务器上访问不到我的项目的坑已经起码2天了。今天早上终于TMD解决了！！！
在苍老师帮助下,发现我的springmvc没有配置静态资源映射。他给我看的例子：

1
2

<!-- 静态资源过滤 -->
<mvc:resources location="/resources/" mapping="/resources/**"/>

      但是我仔细对比了以前的老项目,有两个项目根本没有这段代码,其实我也不是很懂,后来翻开自己曾经写过的一篇springMVC项目搭建,发现我当时也配置了,这就说明的确需要去映射静态资源的,至于为什么有的老项目没有这段代码,我当时也不知道why?
      后来我把这段加上去,发现没有resources文件夹,然后建了一个。一开始放在src目录下与com并列,放到服务器上怎么跑都没用。然后仔细阅读当时的博客,发现博客上把resources建在了WebContent目录下,因为博客上搭建的springmvc项目是中规中矩的,所有代码都在WebContent,所以没问题。而我并没有把项目代码放在WebContent下,而是放在了degree文件下(与WebContent并列同级的),而且我用到了webpack打包,打包后的dist文件夹自动也放在了degree目录下,那么,我就在想了,我把配置文件里面的resources改成dist不就行了吗？

看到 https://www.cnblogs.com/yank/p/4477204.html 这里的解释,了解到mapping是映射的意思,location：本地资源路径,注意必须是webapp根目录下的路径。两个*，它表示映射resources/下所有的URL，包括子路径（即接多个/）
我这里webapp不就是degree嘛,而我dist文件夹的确在degree下啊。

然后我照做了,不行。。。
why?
我不知道,但是我知道这一定是springmvc访问静态资源的问题了,所以一直围绕着这个问题百度,最终,黄天不负有心人！！！让我找到了解决方案：

http://blog.csdn.net/sbangm/article/details/41722559
这篇博客讲到,对静态资源的访问有两种方案

1 2 3 4 5 6

1. <mvc:default-servlet-handler/> 2. <mvc:resources mapping="/images/**" location="/images/" cache-period="31556926"/> <mvc:resources mapping="/js/**" location="/js/" cache-period="31556926"/> <mvc:resources mapping="/css/**" location="/css/" cache-period="31556926"/>

注意！！！加<mvc:resources...前，要加上<mvc:annotation-driver/>，否则servlet控件器会解析失败
      然后我试了下第一种方法,果然成功了。我立马想到之前有的老项目配置里面没有<mvc:resources...会不会也是用了第一种方法,打开一看果不其然。
不懂springmvc直接硬上太坑了,接下来java和springmvc要好好学了。

      接下来又遇到个小坑,虽然不报404了,但是页面显示空白,浏览器network一大堆报红,这还是打包后的静态资源没有的问题,不过之前百度时有看到别人提过该问题,确定为是webpack打包后的路径问题,然后继续百度下发现了在 https://segmentfault.com/a/1190000010230843#articleHeader11 上有解答。

主要是把assetsPublicPath: '/'改为assetsPublicPath: './'即可。具体可看该地址,人家讲的不错。
其实我之前也翻译过了,地址是/static的话webpack不会对它做任何处理,而地址./static会被当成一个模块依赖解析。它们会被自动替换路径基于你的webpack output配置。

OK,大功告成！！！开搞公众号~