Vue — 项目部署相关问题

       第一次负责把开发的vue项目部署到测试环境，很多东西一开始都搞不清，来来回回查阅了很多信息，最终还是成功将我们的项目在测试上跑了起来。对于之前没用过vue的人来说，过程还是有点心累。

（一）修改配置文件

       我们在开发的时候引用静态资源（图片，css文件等）都是使用的相对路径，这里举个栗子：

这是开发的项目目录，我在about.vue里放了一张背景图（在style里编写的），路径是../../assets/img/...,

打包之后的项目目录是这样的：

这时，我们之前.vue文件里的style部分都被打包成了一个个css文件，这些文件里设置的背景图片的路径应该是../img/...或者是../../static/img/...

这时候我们必须要在打包之前做一些配置，才能让我们正常的获取到这些静态资源。

我只修改了两个配置文件：

1.build/utils.js

感兴趣的话可以去研究一下这个文件里面的各项配置，这里我们在打包之前需要加一行代码：

注释掉的这一行就是需要加的代码，他能为我们打包后的文件加上../../前缀，这样我们的图片等静态资源就能正常获取。

2.config/index.js

开发中，我们的根路径是‘/’,打包之前我们需要设置为‘./’

改了这两个配置文件之后，我们打包出来的项目就可以正常获取资源了。

（二）项目启动

我是习惯性的把打包之后的文件丢进tomcat里，这样就可以正常的启动了。先说一下，我们公司是用tomcat运行项目，我是新建了一个webapp项目，然后把我打包的文件放在了webapp里面：

其他的文件都是项目自动生成的，不用管，我这样做主要是想测试一下能不能在tomcat里正常启动项目，结果是ok的。

（三）路径（路由）问题

      项目配置路由的时候用的是history模式，所以当项目在tomcat中启动之后产生了一个问题，我可以用localhost:8080/index.html访问到我的页面，但是与此同时，页面并不会默认展示我们希望展示的组件（比如开发中可以通过localhost:8080访问到默认的公共组建以及home组件），但是在tomcat启动之后直接访问localhost:8080报404，localhost:8080/index.html访问只显示全局公共组件——头部。

        点击头部有一个回到首页的功能，也就是会重定向到/home页面，所以在只显示头部的情况下，我点击头部之后home组件可以正常展示，url也正常显示为localhost:8080/home，然后再进行跳转之类的操作页面都能正常执行，但是，当我们刷新页面之后，页面依旧会报404（此时的页面url为localhost:8080/home这种形式）。

        这就是history模式的特点，相比默认的hash模式，他会跟简洁好看，但是部署到环境上如果要正常访问还是需要后台人员去做相应的配置，这里我不细说，感兴趣的可以去度娘。

        我把路由模式改成了默认的hash模式，这样项目启动之后，访问地址变为http://localhost:8080/#/home这种形式，刷新页面也不会出现问题。

    （四）axios跨域

        项目需要跨域发起请求，开发的时候我用的是node代理，很方便的解决了跨域问题，代码如下：

config/index.js

使用axios：

这用我们通过代理就能直接向http://192.0.0.0/api/sendMail发起请求。

但是这个代理只能在我们开发中使用，当把项目部署到环境上之后，需要后台人员配置相应的代理（nginx代理）就可以实现跨域请求了。

（五）vue.jsonp

vue.jsonp也是可以实现跨域，并且不需要配置代理，使用方法如下：

1、执行命令：

1	npm install vue-jsonp --save

2、src/main.js中添加：

import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)

3、其它组件中基本使用方法：

this.$jsonp(url, data{} ).then(data=> {

console.log(data)

}).catch(err => {　　console.log(err)})