关于项目下js、css等文件的引用问题

前阵子被“文件引用路径”这个问题折腾了好久，后来才渐渐明白是怎么一回事。
大家都知道，为了安全性问题，项目开发时不会直接把页面文件放在 Webapp(WebContent) 下，而是放在 Webapp(WebContent) 下的 WEB-INF 目录中，因为 WEB-INF 目录只对服务端开放，对于客户端是访问不到了。那么，问题来了，在 WEB-INF 目录如何引用非 WEB-INF 目录（也即是 Webapp 或者 WebContent 下 ) 的 js 、 css 等外部文件呢？

下面是项目的目录结构（项目使用 maven 构建）

   

首先，先说明一下在webapp下的inde.jsp文件如何去引用webapp下的common/jquery.min.js文件

由于index.jsp与common文件夹是在同一级目录下，于是我们可以采用正常相对路径的引用方式即可，如下：

接下来我们看看在WEB-INF目录引用非WEB-INF目录下文件出现的一些问题

首先是我们前端登录页面frontLogin.jsp，登录验证交由front/login.action控制器处理

登录成功，进入 /WEB-INF/jsp/front/user/index.jsp（在项目中已经配置了视图解析器的前缀“/WEB-INF/jsp/”，这样不用很麻烦的去写jsp文件的全路径了）

那么问题来了，如何在index.jsp文件中去引用webapp下的common/jquery.min.js文件呢？

大家都会想到采用绝对路径或者是相对路径两种引用方式

方式1、绝对路径：/common/jquery.min.js, 可是结果呢？

很明显，引用路径中少了项目名字。于是改成这样：/Tourism/common/jquery.min.js

哎，可以了耶。但是，这样的引用方式有一个问题：引用文件时所有的路径都得加上项目名字“/Tourism”，这无疑是不合理的，再说了，万一项目名字改变了呢，那岂不是得去改所有的引用路径。

于是采用方式2、相对路径：../../../common/jquery.min.js

哇，这种方式不得吐血啊，这么多级的目录。但是呢，这种方式也是不正确的，index.jsp文件中并不能正常的引用jquery.min.js文件。

折腾了好久也没解决这个问题。。。。。

后来，打开Chrome浏览器，按F12，查看项目编译后的目录结构，如下：

马上明白了是怎么一回事了。index.jsp是由/front/login.action控制器返回视图而显示的，此时相当于index.jsp就是挂载在/front/login.action目录中，于是，采用相对路径的引用方式：../common/jquery.min.js

 至此，问题解决

以上纯属个人见解，如果错误，望大家斧正