VuePc项目基本部署

装常用包

• npm i element-ui
• npm install -D less-loader less
• npm i axios
• npm i vue-router

环境变量配置

• 1.在项目根目录（与README.md同级）下创建.env.development（.env.production）文件配置开发环境(生产环境)文件
• 2.内部键值对中：VUE_APP_URL=基地址
• 3.使用：process.env.变量名（VUE_APP_开头的变量）
• 注意点：
  • 1.定义好后要重新执行npm run serve才能使用定义的变量
  • 2.它是全局变量，任何生命同期都可调用
  • 3.不要在html里面使用process.env.VUE_APP_名字
  • 4.设置完成一定要重启脚 手架

脚手架设置跨域代理

• 1.在README同级目录下创建一个vue.config.js
• 2.在vue.config.js使用下面代码
• 3.将.env.development 内的基地址替换为 /public（VUE_APP_URL=/public）

module.exports = {
  // 1:将.env.development  内的基地址替换为  /public
  //2复制下面配制

  publicPath: './',
  devServer: {
    proxy: {
      //跨域:不同源  客户端请求服务端
      '/public': {
        //这里最好有一个 /
        target: 'http://127.0.0.1/xxx', // 后台接口域名  http://127.0.0.1/xxx/public/uploads  真实接口地址
        secure: false, // 如果是https接口，需要配置这个参数
        changeOrigin: true, //是否跨域
        pathRewrite: {
          //   '/public': ''
        }
      }
    }
  }
}

main.js

import Vue from 'vue'
import App from './App.vue'
/*
element-ui基本使用
1:装包   npm i element-ui
2:导入  import ElementUi from 'element-ui'
    导入css
3:注册
    Vue.use(ElementUi)

*/
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// axios使用
// import axios from 'axios'
// const _axios = axios.create({
//   baseURL: process.env.VUE_APP_URL,
//   withCredentials: true
// })
// Vue.prototype.$axios = _axios

Vue.use(ElementUI)
// 5:注入到new Vue({router:router})
// 阻止启动生产消息，
Vue.config.productionTip = false
import router from '@/router/index.js'
import store from '@/store/index.js'
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

request.js

// 使用axios
import axios from 'axios'
// 引入message
import { Message } from 'element-ui'
import { getLocal, removeLocal } from '@/utils/local.js'
import router from '@/router/index.js'
const _fetch = axios.create({
  baseURL: process.env.VUE_APP_URL,
  withCredentials: true //在跨域请求时，会携带用户凭证
})
// 添加请求拦截器
_fetch.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    config.headers.token = getLocal('token')
    return config
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 添加响应拦截器
_fetch.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    if (response.data.code == 200) {
      return response
    } else if (response.data.code == 206) {
      // token过期或被修改
      // 提示
      Message.error(response.data.message)
      // 清除token
      removeLocal('token')
      router.push('/login')
      return Promise.reject(response.data.message)
    } else {
      Message.error(response.data.message)
      return Promise.reject(response.data.message)
    }
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)
export default _fetch

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: () => import('@/views/login/login') }
  ]
})
export default router