Vue2打包，VueAxios使用，VueX状态管理

Axios使用

1.安装Axios：npm i axios -S

2.绑定Axios到Vue：

main.js
import Axios from "axios"
Vue.prototype.$http = Axios

设置代理，访问远程资源

1.配置config/index.js

proxyTable: {
      "/apis":{
        target:"http://localhost",  //目标资源地址
        changeOrigin:true,  //是否跨域
        pathRewrite:{
          "^/apis":""  //是否重写接口
        }
      }
    }

VueX

1.状态管理模式 -- 集中式管理组件数据

2.使用：1.安装：$ npm i vuex@3.6.2 -S -- vue2对应装vuex3

2.导入并通过Vue.use()安装

3.语法：

store.js:
import Vue from "vue"
import Vuex from "vuex"  //导入vuex
Vue.use(Vuex);  //安装vuex
//将store导出
export default new Vuex.Store({
    state:{},  //共享状态，实例中通过this.$store.state调用
    getters:{}, //依赖state的属性，类似计算属性，实例中通过this.$store.getters调用
    mutations:{},  //更改状态的方法 -- 同步方法，实例中通过this.$store.commit()调用
    actions:{},  //间接更改状态的方法，最终通过调用mutations更改状态  --  异步方法，实例中通过this.$store.dispatch()调用
    modules:{}  //模块内容
})

应用到Vue中

import store from "./store/store.js"
new Vue({
	store,  //通过store选项全局绑定
})

vue2打包

1.命令：$ npm run build

2.打包配置：config/index.js 中 build属性

3.接口路径错误：1.开发中使用代理

2.生产环境中没有代理

解决：给axios设置baseURL

Axios.defaults.baseURL = process.ENV.NODE_ENV == "development" ? "/apis" : "线上地址"

1. 打包之后的文件必须在http服务器环境中运行