工作小问题的解决

朴灿烈づ我的快乐病毒、 2023-10-10 09:10 13阅读 0赞

## 工作小问题 ##

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

1.  vue.js2.0脚手架启动显示webpack-dev-server --inline --progress --config  
    build/webpack.dev.conf.js不是内部命令问题。  
    解决方法：  
    先重装依赖 npm install ，其次npm run build ,最后启动 npm run dev。
2.  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

1.  定义并使用全局变量  
    首先设置一个常量![20191017150251196.png][]  
    我们通过export default输入  
    再到入口文件mian.js中通过import引入  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5sZWlibw_size_16_color_FFFFFF_t_70]  
    这样子我们就算是把这个常量放到全局下了，现在到你先要引入的文件中进行引用；  
    this.whole.user 就可以引用whole下的user了。  
    参考链接：https://blog.csdn.net/qq\_30669833/article/details/81706217
2.  浏览器全屏解决方案  
    解决方法：  
    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

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

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

1.  瀑布流布局

1.  
2.

> –到底了–

[20191017150251196.png]: https://img-blog.csdnimg.cn/20191017150251196.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5sZWlibw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191017150441802.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5sZWlibw==,size_16,color_FFFFFF,t_70