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	npm install vue-jsonp --save

二、src/main.js中添加：

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

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

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

console.log(data)

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