工作小问题的解决

工作小问题

本文仅记录在日常工作遇到的问题以及解决方法。

vue.js2.0脚手架启动显示webpack-dev-server --inline --progress --config
build/webpack.dev.conf.js不是内部命令问题。
解决方法：
先重装依赖 npm install ，其次npm run build ,最后启动 npm run dev。
vue路由模式改成history后，项目上线刷新报错404。
这是因为刷新页面时访问的资源在服务端找不到，因为vue-router设置的路径不是真实存在的路径。
这个问题我上网搜索很多答案，大多是都是推荐使用nginx来解决。那我也是通过这个方法解决这个问题。
解决方法：

//nginx配置写法：
location / {
    
    
        root  /usr/local/app/rsti/rsti-web/;
        index  index.html index.htm;
        try_files $uri $uri/ @router;
        index index.html;
    }
    location @router {
    
    
        rewrite ^.*$ /index.html last;
     }

参考的链接：https://blog.csdn.net/gaozhigang/article/details/88720117

定义并使用全局变量
首先设置一个常量
我们通过export default输入
再到入口文件mian.js中通过import引入

这样子我们就算是把这个常量放到全局下了，现在到你先要引入的文件中进行引用；
this.whole.user 就可以引用whole下的user了。
参考链接：https://blog.csdn.net/qq_30669833/article/details/81706217
浏览器全屏解决方案
解决方法：
H5提供了一个全屏api：requestFullscreen，我们可以通过这个来进行对dom进行全屏放大。

//全屏
     requestFullScreen(){
     //将de 修改成你想要全屏放大的DOM
      let de = document.querySelector('.avue-main')
      let tags = document.querySelector('.avue-tags')
      //判断浏览器支不支持全屏requestFullscreen
       if(!this.isFullscreen){
         this.$message({
           type: 'error',
           message: `当前浏览器不支持全屏，请使用谷歌浏览器`
         });
         return
       }
      if (de.requestFullscreen) {
        de.requestFullscreen();
        tags.style = "display:none"
      } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen();
        tags.style = "display:none"
      } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen();
        tags.style = "display:none"
      }
    },

//退出全屏
    window.onkeydown = function exitFullscreen() {
      var de = document;
      if (de.exitFullscreen) {
        de.exitFullscreen();
      } else if (de.mozCancelFullScreen) {
        de.mozCancelFullScreen();
      } else if (de.webkitCancelFullScreen) {
        de.webkitCancelFullScreen();
      }
    }

参考的链接：https://blog.csdn.net/u013654125/article/details/79582462

监听路由参数变化
当路由参数发生变化时，就会触发。

watch:{
    
    
  $route(to,from){
    
    
    console.log(to);
  }
},

瀑布流布局


    <style>
        .columns {
            width: 100%;
            column-width: 320px;
            column-gap: 15px;
        }

        .columns figure {
            display: inline-block;
            box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
            -webkit-column-break-inside: avoid;
            border-radius: 8px;
            margin-top: 0;
            margin-left: 0;
            margin-right: 0;
        }

        .columns figure img {
            width: 100%;
            height: 100%;
            border-radius: 8px;
        }
    </style>

    <div class="columns">
        <figure>
            <img src="https://source.unsplash.com/random?city" alt="" />
        </figure>
        <figure>
            <img src="https://source.unsplash.com/random?night" alt="" />
        </figure>
        <figure>
            <img src="https://source.unsplash.com/random?developer" alt="" />
        </figure>
    </div>

–到底了–

工作小问题的解决

工作小问题

猜你喜欢