打包上线

配置打包路劲和资源访问路劲

1. 新建vue.config.js文件，代码如下

module.exports = {
    //资源路径，就是我们在地址栏中要输入的路径
    publicPath: '/maizuo/hemugao/',
    //打包路劲
    outputDir: "hemugao",
    //关闭eslint检查
    lintOnSave: false
}

image.png

2.执行npm run build命令，打包我们的项目，把生成的发到服务器就可以了

配置拦截器

1. request 拦截器, 在请求数据之前做一些处理,比如发起一个 loading,添加请求头等
2. response 拦截器, 数据返回之后做一些处理,比如成功之后只把 data 里的数据返回,方便后续数据的处理

image.png

全局变量process.env

import Vue from 'vue'
import axios from 'axios'
//因为在公司的时候，为了安全起见，一般都是有多个环境，一般有开发环境和生产环境

//打印的结果有两种情况
// 第一种：还没打包上线的时候，打印的是development，就是我们的开发环境
//第二种：打包上线之后，打印的是开发环境
console.log("过程：", process.env.NODE_ENV)
let env = process.env.NODE_ENV;
let baseURL = '';

if (env === 'development') {
    //开发环境的配置
    baseURL = 'http://gao.huruqing.cn:3000/admin'
} else {
    // 生产环境，这里的路径是我们的生产路劲，为了方便，我这里没有弄开发路劲，到时候我们自己换成生产路劲
    baseURL = 'http://gao.huruqing.cn:3000/admin'
}


const service = axios.create({
    // baseURL: 'http://132.232.87.95:3000/admin',
    // http://gao.huruqing.cn:3000/admin/film/add


    // baseURL: 'http://gao.huruqing.cn:3000/admin',//还没有配置生产环境和开发环境的设置
    baseURL,
    timeout: 6000
})

//配置成功后的拦截器
service.interceptors.response.use(res => {
    if (res.data.code == 666) {
        return res.data
    } else {
        return Promise.reject(res.data.msg);
    }
}, error => {
    return Promise.reject(error)
})

export default service

在main.js文件中引入和使用

import Vue from 'vue'
import App from './App.vue'
// 公共和重置样式
import '@/assets/style/commen.css'
import '@/assets/style/reset.css'
// 路由的导入
import router from '@/router/index'
// ElementUI库的导入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//Vuex的导入
import store from './store/index'

//导入axios
import $axios from './utils/request'
Vue.prototype.$axios = $axios

Vue.use(ElementUI);


Vue.config.productionTip = false

new Vue({
    render: h => h(App),
    router,
    store
}).$mount('#app')

在组件中就可以直接使用了

 methods: {
    onSubmit() {
        this.loading = true;
        let url = "/city/add"
        this.$axios.post(url,this.form).then(res=>{
            this.loading=false
            console.log("res",res)
             this.$message.success("添加成功");
             this.form={}
        }).catch(err=>{
            this.loading=false
            console.log("失败",err)
              this.$message.error("添加失败");
        })
        console.log("this.loading",this.loading)
      console.log("submit!",this.form);
    }
  }
};