之前一直都是跟着视频去学习，最近一个月终于在换了一个公司的前提下，开始了用vue写代码，如果要问之前用什么写，一直写原生你信吗，，，整理一下这一个月来遇到的大坑小坑
1.图片路径
图片在开发环境下可以显示，打包到生产就丢失了，原因是因为我之前的路径写的都是
background: url("/src/page/PersonCenter/img/icon_djs.png");写的都是绝对路径，应该改成相对路径，在webpack 中绝对路径是不会被编译大包的，它把这种路径当成网络图标不会做任何操作。根据当前路径改成
background: url("./img/icon_djs.png");就可以了，但是需要注意下面是不行的×
background: url("../PersonCenter/img/icon_djs.png");//错误❌这个路径是不会被编译的，很奇怪，，要搞成./../才可以。
background: url("./../PersonCenter/img/icon_djs.png");//正确✔特别注意！
2.手机浏览器返回问题
正常的返回是可以用的，但是在登录页面，点击登录，登录成功，跳转详情页或者其他页面，这是点了返回，因为之气那的登录页面是一个页面不是弹框，浏览器的返回或者手机的返回键会让页面再次回到登录页面，，查了会多关于监听手机浏览器返回的资料，最后都没有用到，vue 自带的一个功能解决问题，当跳转登录页，或者跳转不需要返回的页面的时候，不要用this.$router.push(),用。replace代替不会产生历史
3。将请求到的数据包含/n的字符串直接输出到页面产生换行效果，添加一个css属性white-space: pre;之前写的少没遇到过，写下备注下。
4.h5保存图片到手机，
function convertImageToCanvas(image) {
var canvas = document.createElement('canvas')
console.log(image.naturalHeight)
console.log(image.naturalWidth)
canvas.width = 1080// image.naturalWidth;
canvas.height = 2060// image.naturalHeight;
image.setAttribute('crossOrigin', 'anonymous')
canvas.getContext('2d').drawImage(image, 0, 0)
return canvas
}
// Converts canvas to an image
function convertCanvasToImage(canvas) {
var image = new Image()
image.src = canvas.toDataURL('image/png')
return image
}
console.log(this.$refs.imgDown)
let canvas = convertImageToCanvas(this.$refs.imgDown)
let img = convertCanvasToImage(canvas)
var a = document.createElement('a')
// 创建一个单击事件
var event = new MouseEvent('click')
// 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
a.download = 'linghuaqian.png'
// 将生成的URL设置为a.href属性
a.href = img.src
// 触发a的单击事件
a.dispatchEvent(event)最终在浏览器上可以在手机端，uc和微信都不可以，微信是因为他会屏蔽一些功能，想要微信可以必须对接微信的jssdk,,,,最后放弃了这个想法，添加了一个提示“长按图片进行保存” o(╥﹏╥)o对不起江东父老
5.canvas 做动态背景
<div class="animationRound">
<canvas width="222px" height="222px" ref="canvas" style="visibility: visible"> </canvas>
</div> mounted () {
this.timer = setInterval(() => {
this.setCanvasFunc()
}, 100)
},
methods: {
setCanvasFunc () {
try {
this.canvasContain = this.$refs.canvas// 指定canvas
this.ctx = this.$refs.canvas.getContext('2d')// 设置2D渲染区域
this.ctx.clearRect(0, 0, 222, 222)
/* 外层圆 */
this.ctx.beginPath()
this.ctx.strokeStyle = '#CDF0FF'
this.ctx.arc(111, 111, 100, 0, 2 * Math.PI)
this.ctx.stroke()
/* 中间圆 */
this.ctx.beginPath()
this.ctx.lineWidth = 2// 线条的宽度
let myGradient = this.ctx.createLinearGradient(0, 0, 230, 230)
myGradient.addColorStop(0, '#0082ff')
myGradient.addColorStop(1, '#CDF0FF')
this.ctx.strokeStyle = myGradient// "#0082ff";
this.ctx.arc(111, 111, 80, 0, 2 * Math.PI)
this.ctx.stroke()
/* 内圆 */
this.ctx.beginPath()
this.ctx.strokeStyle = '#CDF0FF'
this.ctx.arc(111, 111, 60, 0, 2 * Math.PI)
this.ctx.stroke()
/* 调整原点位置 */
// this.ctx.translate(111,111);
/* 原点设置 */
this.ctx.translate(111, 111)
this.Rotate = this.Rotate + 1
this.ctx.rotate(this.Rotate * Math.PI / 180)
/* 外层点 */
this.ctx.beginPath()
// this.ctx.strokeStyle="#CDF0FF";
this.ctx.fillStyle = '#52C6FF'
this.ctx.arc(0, 100, 4, 0, 2 * Math.PI)
this.ctx.stroke()
this.ctx.fill()
this.ctx.rotate(-this.Rotate * Math.PI / 180)
this.ctx.rotate(this.Rotate * 3 * Math.PI / 180)
/* 中间层点 */
this.ctx.beginPath()
// this.ctx.strokeStyle="#CDF0FF";
this.ctx.fillStyle = '#0082ff'
this.ctx.arc(80, 0, 6, 0, 2 * Math.PI)
this.ctx.stroke()
this.ctx.fill()
/* 内层点 */
this.ctx.rotate(-this.Rotate * 3 * Math.PI / 180)
this.ctx.rotate(this.Rotate * 6 * Math.PI / 180)
this.ctx.beginPath()
// this.ctx.strokeStyle="#CDF0FF";
this.ctx.fillStyle = '#52C6FF'
this.ctx.arc(-60, 0, 5, 0, 2 * Math.PI)
this.ctx.stroke()
this.ctx.fill()
this.ctx.rotate(-this.Rotate * 6 * Math.PI / 180)
this.ctx.translate(-111, -111)
// this.ctx.drawImage("", 0, 0, 500, 281, 0, 0, 130, 190)
} catch (e) {}
}
},在页面切换的时候一定要销毁定时器
destroyed () {
clearInterval(this.timer)
this.timer = null
}6.苹果手机的input会带有倒角，要加border-radius：0,
其他人解决方案
https://www.cnblogs.com/y896926473/articles/6207721.html
我的解决方案：
将原来的固定定位改成绝对定位，通过计算保证定位在最下面的图始终在最下面
mounted() {
let htmlH = document.documentElement.clientHeight// 获取浏览器高度
console.log(htmlH)
console.log(this.$refs.contain.getClientRects())//整个容器高度refs.contain是最外层元素也可以当做body
let heightNum = (parseInt(this.$refs.contain.getClientRects()[0].height) + parseInt(this.$refs.contain.getClientRects()[0].top) + 280)//280是需要定位在最底部容器的高度
//计算出整个页面应该有的高度
heightNum = (heightNum > htmlH ? heightNum : htmlH)//比较设备高度和应该有的高度，取大值当做整个页面应该有的高度，然后底部应该用fixed,改为absoult,bottom:0px,
this.$set(this.heightInfo, 'height', heightNum + 'px')//高边页面高度
}8.router的histroy模式，
开发是用的hash模式，上线要改成histroy,开发模式可以，但是放上生成就是白屏，找不到是因为路径找不到，两种解决方案，1.把生产的项目放到跟服务器跟目录下，，这个一般不好改，2.加上基础路径，base就可以
export default new Router({
mode: 'hash', // history: {ngnix 配置需要 否则生产环境刷新页面无法找到当前路径 , hash: 开发环境}
routes: [
{path: '/', name: 'Main', redirect: '/MainDetail'},
{path: '/Main', name: 'Main', component: Main},export default new Router({
mode: 'history', // history: {ngnix 配置需要 否则生产环境刷新页面无法找到当前路径 , hash: 开发环境}
base: '/jjh5',
routes: [
{path: '/', name: 'Main', redirect: '/MainDetail'},
{path: '/Main', name: 'Main', component: Main},另外 vue的，路由拦截
以及axios的请求接收拦截功能，用起来感觉太爽了，O(∩_∩)O哈哈~（莫怪我是乡下人没见过世面）
2025
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
