一、前言

从杭州回武汉这边快两个月了，入职不久就让我单独开发一个简易的系统，只要求用vue完成，从开始写到现在已经快一个月了，需求基本已经能够实现了，第一次实际上手vue，确实是碰到不少问题，记录一下

二、项目简介

本项目使用vue+element-ui+axios+vuex+NProgress

三、问题

1.如何设置组件背景（不污染其他组件）

data() {
      return {
        //图片url地址,使用require引入防止生产环境路径出现问题
        bgUrl: require('../assets/img/login/web_login_bg.jpg'),
      }
 },
    //进入时渲染
    beforeRouteEnter(to, from, next) {
      next((vm) => {
        document.querySelector('html').style.cssText = `
        background: url(${vm.bgUrl}) center no-repeat;
        background-size: cover;
        background-attachment: fixed;
      `
      })
    },
     //离开时销毁
    beforeRouteLeave(to, from, next) {
      document.querySelector('html').style.cssText = `background: #ffffff;`
      next()
},

ts版（如果vue3时记得写在setup函数外哦，见问题2）：

  /**
   * 路由守卫，当进入此路由时触发
   * 在此处用于更换背景图片
   * @param {object} to       即将要进入的目标路由对象
   * @param {object} from     当前导航正要离开的路由
   * @param {Function} next   一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
   */
  beforeRouteEnter(_to:Object,_from:Object,next:any):void {
    window.sessionStorage.clear()
    // 因为此时组件实例化还没创建，不能访问this,通过 `vm` 访问组件实例
    next(() => {
      const html: any = document.querySelector('html')
      html.style.cssText = `
        background: url(${require('../../assets/img/login/web_login_bg.jpg')}) center no-repeat;
        background-size: cover;
        background-attachment: fixed;
      `
    })
  },

2.在谷歌中如何调试vue代码

在项目中的vue.config.js中新增如下配置即可（如没有此文件，新建一个）

module.exports = {
  //谷歌调试代码
  configureWebpack: {
    devtool: 'source-map'
  },
}

3.axios解决跨域

问题：网络请求时出现以下错误：(跨域问题这里不详细说，自己查一下)

解决：因为axios中只能使用get和post方法来进行请求数据，没有提供jsonp等方法进行跨域访问数据，所以使用代理服务器进行访问，在vue.config.js中新增如下配置,：

module.exports = {
 devServer: {
    /* 自动打开浏览器 */
    open: true,
    /* 设置为0.0.0.0则所有的地址均能访问 */
    host: '0.0.0.0',
    port: 9090,
    https: false,
    hotOnly: false,
    /* 使用代理 */
    proxy: {
      //实际请求时，这里会去你的url中匹配'/api'，并将其替换成下面代理服务器的地址
      '/api': {
        /* 目标代理服务器地址 */
        target: '代理服务器地址',
        /* 允许跨域 */
        changeOrigin: true,
      },
    },
  },
}

4.axios的封装(另外使用了nprogress)

(1)在src中新建一个文件夹network，文件夹中新建一个request.js文件
(2)新增如下配置：

// 'use strict';
import axios from 'axios';
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import store from '../store/index'
axios.defaults.timeout = 5000
axios.defaults.withCredentials = true
//拦截器
axios.interceptors.request.use(config => {
  NProgress.start()
  // 请求头默认携带token
  config.headers.Authorization = "Bearer " + sessionStorage.getItem('AccessToken')
  return config
}, error => {
  return Promise.reject(error)
})
// 响应器
axios.interceptors.response.use(config => {
  NProgress.done()
  return config
})
// 封装的post请求
export function post(url, data) {
  return axios({
    url: url,
    baseURL: 'http:',
    method: 'post',
    data: data
  })
}
// 封装的get请求
export function get(url, params) {
  return axios({
    url,
    params: params
  })
}

(3).具体使用

import { post } from '../network/request'
export default {
mounted() {
      post('目标url地址', Data)
              .then((ress, err) => {
               //请求成功数据处理         
               }
              .catch((err) => {
                console.log(err)
                this.$message.error('请求失败!')
              })
    },
}

5.动态引入组件：

根据zjName返回出来的组件动态渲染组件，同样可使用props以及emit

<template>
    <component :is="zjName">
    </component>
</template>

computed: {
    zjName() {
      var str
      if () {
        str = () => import('组件路径')
       }
      else  if(){
        str = () => import('组件路径')
       }
 }

6.生产环境去掉console打印(不使用webpack等第三方插件)

(1)新建一个RemoveConsole.js文件，添加如下代码

export function rewirteLog() {
  console.log = (function (log) {
      return process.env.NODE_ENV == 'development'? log : function() {}
  }(console.log))
}

(2)main.js中引入并运行

import {rewirteLog} from './utils/RemoveConsole'
rewirteLog()