Rails5应用无法渲染Vue组件（*.vue文件）问题求助

Hey there! I’ve run into this exact Babel error before when setting up Vue with Rails Webpacker, so let’s break down what’s going wrong and how to fix it.

Why This Happens #

The error you’re seeing usually means your setup is missing either the required dependencies to process .vue files, or your Babel/Webpack configuration is incomplete (even if you didn’t manually change anything—sometimes default setups can get out of sync).

Step-by-Step Fixes #

1. Install or Reinstall Vue-Related Dependencies #

First, make sure all the necessary packages are installed. Run these commands in your terminal:

# Install Webpacker's Vue setup (if you haven't already)
bundle exec rails webpacker:install:vue

# Manually add core Vue and loader packages (to be safe)
yarn add vue vue-loader vue-template-compiler @babel/preset-env

2. Verify Webpacker's Vue Loader Configuration #

Check that Webpack is set up to handle .vue files:

• Open config/webpack/environment.js and ensure it includes this:

  const { environment } = require('@rails/webpacker')
  const vue = require('./loaders/vue')
  
  environment.loaders.prepend('vue', vue)
  module.exports = environment
  

• Then check config/webpack/loaders/vue.js exists with this content:

  module.exports = {
    test: /\.vue$/,
    use: [{
      loader: 'vue-loader',
      options: {
        compilerOptions: {
          preserveWhitespace: false
        }
      }
    }]
  }
  

  If the vue.js loader file is missing, create it with the code above.

3. Fix Your Babel Configuration #

The Babel error points to a missing preset, so update your Babel config file (either .babelrc in your root directory or babel.config.js):

• For .babelrc:

  {
    "presets": [
      "@babel/preset-env",
      "@rails/webpacker/package/babel/preset"
    ]
  }
  

• For babel.config.js:

  module.exports = {
    presets: [
      '@babel/preset-env',
      require.resolve('@rails/webpacker/package/babel/preset')
    ]
  }
  

4. Clear Caches and Restart Servers #

Cached files often cause weird issues. Run these commands to reset everything:

# Clear Yarn cache
yarn cache clean

# Stop any running Rails and Webpack dev servers, then restart them
bin/webpack-dev-server
rails server

Test It Out #

Create a simple .vue component to verify the fix. For example, save this as app/javascript/packs/components/Hello.vue:

<template>
  <div class="hello">Hello from Vue Component!</div>
</template>

<script>
export default {
  name: 'Hello'
}
</script>

Then update app/javascript/packs/somecode.js to import and render it:

import Vue from 'vue'
import Hello from './components/Hello.vue'

new Vue({
  el: '#app',
  render: h => h(Hello)
})

Add an element with id="app" to one of your Rails views, and you should see the component render without errors!

内容的提问来源于stack exchange，提问作者kansiho