前言

因为是要将之前用jq写的前端代码重构为基于vue下的项目，又是第一次将vue运用起来，所以真的可谓是一步一个坑，今天先记一波部署的坑。

vue项目源码中的修改

router默认的模式是hash，但是由于他在地址栏中的地址会跟一个小尾巴，所以我在做项目的时候直接选择不用这种模式，而是选择了history。随之而来的也是一系列相关的修改。

1. 在router.js中的修改：

 	const router = new Router({
    	mode: 'history',	//模式设置为history
    	base: '/secops/nsoc/'	//这个必配，是index.html所在的路径地址
    })

（此处修改确保打包之后，在服务器上运行时不会出现页面空白的现象）

2. 对webpack的配置修改：
   1） vue-cli2下的修改：
   （这里对于webpack.base.conf.js的修改，为了保证路由跳转的路径正确性）
   （这里对于index.js的修改，为了保证所需静态资源路径）
   
   2） vue-cli3下的修改：
   由于vue-cli3相对于vue-cli2去掉了build和config文件夹，所以如果需要配置，我们需要自己创建一个vue.config.js文件来进行配置，该文件需要和package.json放在同一级别。
   
   写一些基本配置，其中publicPath是必写的。

module.exports = {
    publicPath: './',// 修改路径，3.3起已经用publucPath代替了baseUrl
    assetsDir:'static',
    lintOnSave: true, // 在保存时校验格式
    productionSourceMap: false, // 生产环境是否生成 SourceMap
    devServer: {
      open: true, // 启动服务后是否打开浏览器
      host: '0.0.0.0',
      port: 8080, // 服务端口
      https: false,
      hotOnly: false,
      proxy: null, // 设置代理
    }
}

以上，就已经将vue项目源代码中的配置配好了，接下来就是打包放在tomcat服务其中啦。

npm run build

项目打包后tomcat下的配置

打包后的项目需要放在webapps下面，这个就不用我多说了，由于我的项目需要一点点借鉴之前的项目来与后端结合，所以原有的配置我并没有动。在tomcat中我们只需要修改WEB-INF文件夹中的web.xml文件就好了。

将这段代码写入web.xml文件中即可。

<web-app>
	<error-page>
		<error-code>404</error-code>
		<location>/nsoc/index.html</location>
	</error-page>
</web-app>

配置中注意的问题

1. 该文件中不要配置下面的代码

	<welcome-file-list>
		<welcome-file>default.htm</welcome-file>
	</welcome-file-list>

因为之前的项目是通过配置这个来确定首页的显示，如果他存在就不能跳转到我们所需要的页面了。

2. location中的路径定要确定明白！
   因为受到了router中base的配置影响，所以最一开始的时候我将location配置为

<location>/secops/nsoc/index.html</location>

虽然从‘/’这个路由下进到了我们的项目当中，并且项目中的路由跳转也是正常的，但却出现了一个可怕的问题。当在地址栏中从‘/xxx’路径下想进入到项目中的某一模块时，页面给我们报出了404的错误。并且在控制台中，network下并没有404的请求，console中也没有错误报出。

开始以为是前端代码的问题，在网上搜索了很多也不见结果，最后请教了一位大神找到了根本问题。

实际上，在跳转到’/xxx’的时候请求并没有404，应该是命中了服务器的规则但是服务器上并没有找到与之相对应的静态资源。所以如果没有404的请求，可以首先考虑一下是不是tomcat配置是否存在问题。

关于错误路径可以访问根路由的一点猜想：

在tomcat下，ip地址指向的应该是webapps这个目录， 而tomcat将其设为静态网站目录，所以10.xxx.xxx.xxx/secops/nsoc可以访问到我放在secops/nsoc下的index.html文件，但是当跳转10.xxx.xxx.xxx/secops/nsoc/xxx时，这个目录在文件结构上不存在，所以就应该是404的错误，走到web.xml的404配置中。

只不过web.xml时在secops目录中的，location里的‘/’其实指的是secops。而我写的‘/secops/nsoc/index.html’实际应该是‘secops/secops/nsoc’

所以走到404的配置里发现配置的文件时不存在的，所以会抛出一个‘找不到网页’的问题。

结尾

最后，经过不断的调整，项目部署问题算是解决了，总结的有些啰嗦，但也将我最近踩的坑算是一 一填平了，希望可以对和我一样刚刚起步的人有所帮助。

感谢看到这里。如果有哪里写的有问题，希望来纠正。