遇到的一些vue的问题

一、事件绑定中的事件处理方法后加不加括号问题

1、例如: click事件后加不加括号

　　a、@click = "getContent"

　　b、@click = "getContent()" 

　　vue 对函数调用表达式额外用了一个函数做了层包装。加或者不加都能执行事件处理方法
　　加与不加括号的区别在于事件对象参数 event 的处理。不加括号时，函数第一个参数为 event，加了括号后，需要手动传入 $event 才能获得事件对象

二、vue路由模式由hash切换至history

　　前端：

export default new Router({
    mode: 'history',
    base: '******',
    routes: [
        {}，
        {},
　　　　　......
    ]
)} 

　　nginx配置：

root: '',
location /****** {
　　try_files  $uri  $uri/  @router;　　#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
　　index  index.html  index.htm;
}
 6 location @router {
 7     rewrite ^.*$ /index.html last;
 8 }
location @router {
    rewrite .* /******/index.html  break;
}

 

三、正式环境去除console日志

 

　　1、使用插件  terser-webpack-plugin :

　　　　npm install terser-webpack-plugin -D

　　　　yarn add terser-webpack-plugin --dev

 

　　补充:

　　a、安装到生产环境

　　　　npm i xxx -S
　　　　// -S 是 --save 的缩写;使用 --save(-S) 安装的插件，被写入到 dependencies 对象里面去
　　　　// 不写 -S 默认也是安装到生产环境

　　　　yarn add xxx

　　b、安装到开发环境

　　　　npm i xxx -D
　　　　// -D 是 --save-dev;使用 --save-dev(-D) 安装的插件，被写入到 devDependencies 对象里面去

　　　　yarn add xxx --dev

 

　　2、配置webpack(webpack4.0):

　　　　

module.exports = {
  configureWebpack: (config) => {
    config.optimization = {
      minimizer: [
        new TerserPlugin({
          sourceMap: true,
          terserOptions: {
            compress: {
              drop_console: true
            }
          }
        })
      ]
    }
  }
}

四、使用prerender实现vue的seo

    access_log /var/log/nginx/livefrontend/access.log LFE_multidomain;
    error_log  /var/log/nginx/livefrontend/error.log;

    include /opt/nginx-backend/common/default_error_location.conf;
    include /opt/nginx-backend/common/crossdomain.conf;

    proxy_set_header Host zhangyu.tv;
    proxy_set_header X-Real-IP $x_real_ip;
    proxy_set_header X-Client-IP $x_client_ip;
    proxy_connect_timeout 120s;
    proxy_read_timeout 120s;
    proxy_send_timeout 120s;

    location /test {
        access_log off;
        return 200;
    }

    ##### prerender #### 部分
    root   /html/;
    location /*** {
        # try_files $uri 用于出去 vue 中hash路由带 "#" 号的问题
        # 定义别名   prerender 
        try_files $uri @prerender;
    }
    # 引用 prerender 别名
    location @prerender {
        proxy_set_header X-Prerender-Token 【自己prerender的Token值】;

        set $prerender 0;
        # 搜索引擎收录地址
        if ($http_user_agent ~* "googlebot|bingbot|yandex|baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest/0.|pinterestbot|slackbot|vkShare|W3C_Validator") {
            set $prerender 1;
        }
        if ($args ~ "_escaped_fragment_") {
            set $prerender 1;
        }
        if ($http_user_agent ~ "Prerender") {
            set $prerender 0;
        }
        if ($uri ~* ".(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|svg|eot)") {
            set $prerender 0;
        }

        #resolve using Google's DNS server to force DNS resolution and prevent caching of IPs
        resolver 8.8.8.8;

        if ($prerender = 1) {
            #setting prerender as a variable forces DNS resolution since nginx caches IPs and doesnt play well with load balancing
            # prerender 官方地址可自建
            set $prerender "service.prerender.io";
            #rewrite .* /$scheme://$host$request_uri? break;
            rewrite ^(.+)$ /$scheme://$host$request_uri? break;
            proxy_pass http://$prerender;
        }
        if ($prerender = 0) {
            rewrite .* /***/index.html break;
        }
    }

五、父组件通过props传值给子组件，如何避免子组件改变props的属性值报错问题

　　1、在两种情况下，我们很容易忍不住想去修改props里面的数据

　　　　a、prop作为初始值传入后，子组件想把它当作局部数据来使用

1 props:['data'],
2 data () {
3   return {
4      currentData: this.data
5   }      
6 }

　　　　b、prop作为原始数据传入，由子组件处理成其它数据输出

props:['data'],
computed: {
  currentData () {
     return this.data.toLowerCase()    
  }    
}

六、vue实现动态添加数据滚动条自动滚动到底

watch: {　　
　　msgList() {
　　　　if (this.$refs.danmuContent) {
　　　　　　this.$nextTick(() => {　　　　　　　　　　　　　　//解决滚动条都是滚动到倒数第二条数据上的问题
　　　　　　　　let container = this.$refs.danmuContent
　　　　　　　　container.scrollTop = container.scrollHeight
　　　　　　})
　　　　}
　　}
}

七、vue-cli3项目中路由不变，路由参数变化，页面不刷新的解决办法

watch: {
   '$route' (to, from) {　　// 监听路由是否变化（$route路由对象）
    　　if (to.query.news_id !== from.query.news_id) {
       　　this.id = to.query.news_id
       　　this.getInfo()　　// 重新加载数据
      }
   }
}

 八、vue多页面配置

const.js:　

　　const CONST_PARAMS = {
　　　　TITLE: {
　　　　　　index: '首页',
　　　　　　liveRoom: '详情',
　　　　　　test: '测试'
　　　　}
　　}
　　module.exports = CONST_PARAMS

vue.config.js 

　　const Global = require('glob')
　　const PARAMS = require('./src/common/const.js')
　　const PAGES_PATH = './src/views/*/*.js'

　　module.exports = function () {
　　　　const config = {
　　　　　　productionSourceMap: false,
　　　　　　pages: setPages()
　　　　}
　　　　return config
　　}

　　// 配置多页面入口
　　function setPages () {
　　let pages = {}
　　Global.sync(PAGES_PATH).forEach(pagePath => {
　　　　let pageList = pagePath.split('/')
　　　　let pageName = pageList[pageList.length - 2]

　　　　pages[pageName] = {
　　　　　　entry: pagePath,
　　　　　　template: `./src/views/${pageName}/${pageName}.html`,
　　　　　　filename: `${pageName}.html`,
　　　　　　title: PARAMS.TITLE[pageName]
　　　　}
　　　　console.log(pages)
　　})
　　　　return pages
　　}

九、vue实现点击div外部区域隐藏div

 

template

<div class="task-dialog" v-if="dialogVisible" >
　　<div class="task-detail" @click="close">
　　　　<div class="content" @click="stopClose($event)">
　　　　　　<div class="title">content</div>
　　　　</div>
　　</div>
</div>

 

script

data () {
　　return {
　　　　dialogVisible: false
　　}
},
methods: {
　　close () {
　　　　this.dialogVisible = false
　　},
　　stopClose (event) {
　　　　event.stopPropagation()
　　}
}

 

css

.task-dialog {
　　width: 100vw;
　　height: 100vh;
　　position: fixed;
　　top: 0;
　　left: 0;
　　background-color: rgba(0, 0, 0, 0.6);
　　z-index: 999;
　　.task-detail{
　　　　width: 100%;
　　　　height: 100%;
　　　　display: flex;
　　　　justify-content: center;
　　　　align-items: center;
　　　　.content {
　　　　　　width: 30%;
　　　　　　height: 50%;
　　　　　　background-color: #fff;
　　　　　　border-radius: 10px;
　　　　}
　　}
}