一、前言
从杭州回武汉这边快两个月了，入职不久就让我单独开发一个简易的系统，只要求用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()
