zoukankan      html  css  js  c++  java
  • vue+webpack踩坑实录(不定期更新)

    vue-cli2.9.1如何自动打开浏览器及实现手机调试

      在vue-cli2.9.1以前我们运行 “npm run dev” 程序会自动打开浏览器进行调试,而且在手机浏览器输入 “IP地址:8080” 能实现在手机端的调试,可是升级到vue-cli2.9.1后一切都不一样了,浏览器需要手动输入网址调试,手机端输入 “IP地址:8080” 已经不能打开页面了。有没有顿时感觉整个开发过程都不爽了,总是觉得哪不得劲(不能装B了)。其实修改下配置还能象以前一样流畅的开(装)发(B)的。

      打开 “config/index.js” 找到 “autoOpenBrowser” 属性,把它的值改为 true,“npm run dev” 后发现能自动打开浏览器了。

      还是 “config/index.js” 文件,把 host 的值改为你电脑在局域网中的 ip,重新 “npm run dev” 后在手机端输入 “IP地址:8080” 也能正常打开了。

    复制项目重新安装依赖出错

      不知道有没有人跟我一样当需要用另一台电脑调试项目,把项目从一台电脑复制到另一台电脑时,npm i 后, npm run dev 总出现 “This dependency was not found:* !!vue-style-loader!css-loader?{"sourceMap":true}! 。......” 错误,这是因为sass安装出错(用stylus的同学也会出现类似的错误),npm i 安装好各种依赖后,要单独再安装下 node-sass(npm install node-sass --save-dev) 和 sass-loader (npm install sass-loader --save-dev),如果还不行建议用cnpm安装。

    vue在IE中显示空白或不能跳转

      前几天用脚手架的 webpack-simple 模板构建了一个项目,发现在IE9下面 router-link 跳转无效,鼓捣了很久没解决,网上搜了下终于搞定,现记录如下:

      1、安装 babel-polyfill: cnpm i babel-polyfill --save-dev

      2、在webpack.config.js或webpack.base.conf.js里修改enjoy:

      entry: {
        // app: './src/main.js'
        app: ['babel-polyfill', './src/main.js']
      },

      3、或者在main.js里引入babel-polyfill: import 'babel-polyfill'

      按上述方法操作如果在IE10以下浏览器还是显示空白,说明是webpack server的问题,npm run build打包后上传至服务器再用IE测试应该是正常显示的。

    兼容IE的data写法

      一般情况下我喜欢这么写:

    data () {

      return {

        abc: 'xyz'

      }

    }

      可是有一天我惊奇的发现在IE11里居然报错:缺少‘:’。于是我改成这样:

    data: () => {

      return {

        abc: 'xyz'

      }

    }

      还是报语法错误,再改:

    data: function  ()  {

      return {

        abc: 'xyz'

      }

    }

      这下不报错了,汗一个(我使用的IE版本是IE11.0.19)。进一步研究发现:

      1、不仅 data 必须按第三种写法,所有对象中的函数都必须以第三种写法在IE11里才保证不会出错;

      2、只有插件开发才会出现这种情况,如果是在普通组件中不会报错。

    ref 名称不能与组件同名

      ref如果与组件同名,可能导致不能调用子组件中的方法,如下代码,若执行 this.$refs.slider.anyMethods()会报错:anyMethods is not a function

    <template>
        <div>
            <!-- 下面一行代码是错误的写法 -->
            <slider ref="slider"></slider>
            <!-- 下面一行代码是正确的写法 -->
            <slider ref="slid"></slider>
        </div>
    </template>
    <script>
    import Slider from './slider'
    
    export default {
        components: { Slider }
    }
    </script>

    router-link上click事件无效

      在 router-link 上添加 @click、@touchmove 等原生事件均无效,需要加上修饰符 native 才行,即: @click.native="..."。

  • 相关阅读:
    intellij idea 主题更换(换黑底或白底)
    intellij idea 编码设置(乱码问题)
    Intellij idea中maven加载jar包很慢的解决方案.
    mysql一个特殊的条件.字符串除以0的结果.
    tomcat启动报错:Injection of autowired dependencies failed
    给input文本框添加灰色提示文字,三种方法.
    jquery插件开发尝试(二)
    初试jquery插件开发
    jquery.touchslider.min.js的简单使用
    superslide 学习笔记
  • 原文地址:https://www.cnblogs.com/programs/p/8916858.html
Copyright © 2011-2022 走看看