vue使用总结

一.vue部署到tomcat

    1. 修改config目录下的index.js

        

2.执行npm run build命令之后，把dist目录下的index.html和static文件夹拷贝到tomcat中的webapps目录下ROOT文件中，启动tomcat，在浏览器中输入http://localhost:8080即可访问

3.如果你想要的地址是http://localhost:8080/vue这种形式的，需要修改vue的route配置，如下

然后在tomcat中的webapps目录下新建文件夹vue，重新打包将index.html和static放到vue文件夹下。

二.vue请求后台数据

    vue请求后台数据在开发环境下会出现跨域问题，可以通过配置代理实现跨域访问，但是在生产环境下代理是没用的，所以这里需要做几个设置，在开发和生产环境下都没用问题。

1.设置代理

在config目录下index.js做如下配置

 

2.vue在开发环境下和生产环境下会读取不同的配置文件，这里分别修改这2个文件

（1）开发环境（config/dev.env.js）

    

    

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_HOST:"/api/"   //这里的/api是上面的代理的名字
})

（2）生产环境（config/prod.env.js）

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_HOST: '"http://127.0.0.1:8080/"' // 生产环境地址
}

注意这里单引号和双引号

 

（3）请求的url

 

let url = process.env.API_HOST + '/login?username=' + this.loginForm.userName + '&password=' + this.loginForm.password

这里使用的process.env.API_HOST 在开发环境下会自动使用代理，生产环境下会自动使用ip地址访问后台数据

Replace Pioneer和指向rp主页(http://www.mind-pioneer.com)的链接