vue运行报错解决思路

一、Vue版本不匹配问题的一种解决方法(Vue packages version mismatch:)

vue版本和vue-template-compiler 版本不一致

解决方法：

    1.将 node_modules文件夹先删除

    2.将package.json文件的 Vue版本号和 vue-template-compiler 版本号改为一致（2.6.7），选高的版本，重新进行npm run dev

 

 

二、npm run build 打包后 字体文件路径报错  static/css/static/fonts  应为static/fonts

 

解决方式

步骤1：

找到build文件下的utils.js  

ExtractTextPlugin.extract方法下

添加

publicPath: '../../'  //解决路径报错

修改结果见图：

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'  //解决路径报错
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

 

步骤2：

找到config文件夹下的index.js修改

build 的assetsPublicPath: '/',改为assetsPublicPath: './',

修改结果见图：

 

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',

    // you can set by youself according to actual condition
    assetsPublicPath: './',

 

三、vue 运行过程中 报es6格式错误；

    在目录下增加.babelrc文件

内容为： //transform-es2015-modules-commonjs 重点

内容为： //transform-es2015-modules-commonjs 重点
{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }
}

 四、Module build failed: Error: No PostCSS Config found in:报错：

 

解决方案：在项目根目录新建postcss.config.js文件，并对postcss进行配置：

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

　　

 

 五、Vue 项目启动抛出  No ESLint configuration found.报错

解决方案：在项目根目录新建.eslintrc.js文件，配置：

// https://eslint.org/docs/user-guide/configuring

module.exports = {
    root: true,
    parser: 'babel-eslint',
    parserOptions: {
      sourceType: 'module'
    },
    env: {
      browser: true,
    },
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    extends: 'standard',
    // required to lint *.vue files
    plugins: [
      'html'
    ],
    // add your custom rules here
    'rules': {
      // allow paren-less arrow functions
      'arrow-parens': 0,
      // allow async-await
      'generator-star-spacing': 0,
      // allow debugger during development
      'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
      // 忽略函数空格检测
      'space-before-function-paren': 0,
      // 中缀操作符周围要不要有空格
      'space-infix-ops': 0,
      'no-trailing-spaces': 0,
      'new-parens': 0
    }
  }

　　新建.eslintignore文件

/build/
/config/
/dist/
/*.js