Mismatched Vue Package Versions

A frequent issue arises when the installed versions of vue and vue-template-compiler do not align.

To resolve this:

1. Delete the node_modules directory.
2. Update both vue and vue-template-compiler entries in package.json to the same version (e.g., 2.6.7), opting for the higher version number.
3. Execute npm run dev again.

Incorrect Font File Paths After Build

When building the application with npm run build, font paths may incorrectly resolve to static/css/static/fonts instead of static/fonts.

Step 1: Modify utils.js

In build/utils.js, locate the ExtractTextPlugin.extract block and add the following line:

publicPath: '../../' // Corrects asset path resolution

The updated section should appear as follows:

if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader',
    publicPath: '../../'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

Step 2: Adjust Configuration Path

In config/index.js, modify the assetsPublicPath setting under build from '/' to `'./':

build: {
  // ...
  assetsPublicPath: './',
  // ...
}

ES6 Syntax Errors During Runtime

Encountering syntax errors related to ES6 features during execution often indicates a missing Babel configuration.

Create a .babelrc file at the project root with the following content:

{
  "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"]
    }
  }
}

Missing PostCSS Configuration

An error indicating No PostCSS Config found ocurs when PostCSS lacks proper setup.

Create a postcss.config.js file in the project's root directory with the following configuration:

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

ESLint Configuration Absence

If the application throws an error about missing ESLint configuration, create the necessary files:

.eslintrc.js

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true,
  },
  extends: 'standard',
  plugins: [
    'html'
  ],
  rules: {
    'arrow-parens': 0,
    'generator-star-spacing': 0,
    '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