zoukankan      html  css  js  c++  java
  • vue开发的项目中遇到的警告,报错,配置项目文件等合集(长期更新)

    1. Vue组件里面data()里面没有return时触发错误:Vue components Cannot read property '__ob__' of undefined

    这个警告不解决会触发错误:

    2. Vue项目开启局域网访问

    有的项目比如移动端需要在手机上调试,这个时候需要用局域网开启在手机上查看。

    解决方法:在配置文件加 --host 0.0.0.0

    或者:

    3.当我们运行打包脚本npm run build或者打包ios weexpack build ios有可能会遇到以下报错:ERROR in xxx.js from UglifyJs

    这是因为webpack在打包vue文件时没有成功转换ES6的语法

    解决方法:

    解决方法很简单,加入babel-preset-es2015插件即可
    1、安装依赖包

    $ npm install --save-dev babel-preset-es2015

    ps:babel-loaderbabel-core应该是默认装好的,如果没有安装,请重新安装

    2、修改【webpack.config.js】配置文件
    找到 /.js$/的rules,进行修改

          {
            test: /.js$/,
            use: [{
              loader: 'babel-loader',
              options: {
                 presets: ['es2015']
              }
            }]
          }

    3、根目录下添加【.babelrc】文件
    文件内容:

    {
      "presets": ["es2015"]
    }
    差不多效果是这样的:

    下面也不知道会有了那么多东西,就这样用吧

    {
      "presets": [
        ["env", {
          "modules": false,
          "targets": {
            "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
          }
        }],
        "stage-2"
      ],
      "plugins": ["transform-vue-jsx", "transform-runtime"]
    }
    

    4.运行项目时报错 Error: No PostCSS Config found in... 

     有时候clone下来的项目安装运行后会报这个错误,解决方法:

    在项目根目录新建postcss.config.js文件,并对postcss进行配置:

    module.exports = {  
        plugins: {  
          'autoprefixer': {browsers: 'last 5 version'}  
        }  
      } 
    

     在npm run dev 就好了。postcss配置在 webpack.config.js   postcss.config.js是针对webpack3.0做的特殊处理。

    5.Vue渲染table时调用方法修改data属性的时候报错:You may have an infinite update loop in a component render function. 

    <template>
        <div>
          <el-table :data="tableData" >
                <el-table-column prop="id" label="id"></el-table-column>
                <el-table-column prop="createTime" label="创建时间">
                    <template slot-scope="scope">
                        <span>{{testt('1s1')}}</span>
                    </template>
                </el-table-column>
            </el-table> 
        </div>
    </template>
    <script>
        export default {
            data() {
                return {
                    num:0,
                    tableData:[{id:1,createTime: "2019-03-05"}]
                };
            },
            methods: {
               testt(){
                   this.num = this.num+1
                   console.log(this.num+1)
               },
               deleteRow(){
                   alert(1)
               }
            },
        };
    </script>

    在循环渲染列表的时候(v-for也是如此)同时改变data属性的值就会报错:

    原因:渲染组件的时候,去改变了data里面的数据,data里面的数据变化又会调用render函数,从新渲染组件,这样就造成了 死循环

     

  • 相关阅读:
    Linq聚合操作之Aggregate,Count,Sum,Distinct源码分析
    Linq分区操作之Skip,SkipWhile,Take,TakeWhile源码分析
    Linq生成操作之DefautIfEmpty,Empty,Range,Repeat源码分析
    Linq基础操作之Select,Where,OrderBy,ThenBy源码分析
    PAT 1152 Google Recruitment
    PAT 1092 To Buy or Not to Buy
    PAT 1081 Rational Sum
    PAT 1084 Broken Keyboard
    PAT 1077 Kuchiguse
    PAT 1073 Scientific Notation
  • 原文地址:https://www.cnblogs.com/wangmaoling/p/10751600.html
Copyright © 2011-2022 走看看