vue项目开发相关知识

1.vue跨域的配置

在config文件夹下的index.js文件进行相关配置

 dev: {
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/v1':{  //接口地址
        target:'//ft-test.nbaidai.com',
        changeOrigin:true,   //允许跨域
        secure: false,// 如果是https接口，需要配置这个参数
        pathRewrite:{
          '^/v1':''
        }
      }
    },
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
    devtool: 'cheap-module-eval-source-map',
    cacheBusting: true,
    cssSourceMap: true,
    // 需要插入到模板中的内容
    injectTplConts: ``,
  },

2.vue打包相关配置

文件夹地址同上

  build: {
    index: path.resolve(__dirname, 'dist/index.html'),
    assetsRoot: path.resolve(__dirname , 'dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    productionSourceMap: true
  },

3.vue数据请求相关配置

a，新建request.js文件

// 1. 先引入axios依赖包
import axios from 'axios'
import qs from "qs"
// 2. axios创建对象
const xhr = axios.create({
  baseURL: 'https://xxxxx.com/',
  timeout: 60000,
  withCredentials: false,
  validateStatus: function (status) {
    // 需要放开，否则后台返回个401之类的 我们拿不到response
    return status >= 200 && status < 500 // default
  },
  headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }
})

xhr.interceptors.request.use(function (config) {
  try {
    if (config.method.toLowerCase() == 'get') {
      if (config.params != null && typeof config.params == 'object') {
        config.params = Object.assign({}, config.params);
      } 
    } else if (config.method.toLowerCase() == 'post') {
      if (config.data != null && typeof config.data == 'object') {
        config.data = Object.assign({}, config.data);
      }
      config.data = qs.stringify(config.data);
    }
  } catch (err) {
    console.log(err, 'cookies error');
  }
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
})

// 4. 定义后置拦截器,响应拦截器, 服务器响应回来数据之前触发，
xhr.interceptors.response.use((response) => {
  // 响应回来的数据操作
  return response.data
}, (error) => {
  // 报错的是时候抛出一个报错的信息
  return Promise.reject(error)
})

// 5. 抛出对象的信息
export default xhr

b，main.js全局引入

import Vue from 'vue'
import App from './App.vue'


import xhr from './api/request.js'
Vue.prototype.$http = xhr



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

c，页面使用

   getQuestInfo(urldata) {
      const params = urldata;
      this.$http.get("/v1/question/info", { params }).then((res) => {
        if (res.code === 0) {
         
        } else {
         
        }
      });
    },

4.vue页面路由标题设置

路由文件中配置

{
    path: '/',
    name: 'Home',
    meta: {
      title: "这是 标题" //这是重点
    },
    component: home
},



在最外层  配置
router.beforeEach(async (to, from, next) => {
  // to要进入的目标路由,到哪去Erom离开的路由,哪来的savePosition内容
  to.meta.title && (document.title = to.meta.title);
  next()
})

5，页面设置标题

 document.title =  ” xxxx “