Vue - webpack vue-loader 配置

Posted 2023-02-22

【中文标题】Vue - webpack vue-loader 配置

【英文标题】：Vue - webpack vue-loader configuration

【发布时间】：2017-08-10 16:53:48

【问题描述】：

每当我想构建文件时，我都会不断收到错误消息。它的原因是什么？ 似乎 .vue 文件无法被 webpack 识别，但 webpack 配置文件看起来正常。 网页包错误

bundle-app.js   189 kB       1  [emitted]  app
    + 12 hidden modules

ERROR in Unexpected token >
 @ ./app/application.js 7:11-31

webpack.config.js

var path = require("path");

module.exports = 
  context: path.join(__dirname, 'src'),
  entry: 
    app: './app/application.js'
  ,
  output: 
    path: path.join(__dirname, 'dist'),
    filename: 'bundle-[name].js'
  ,
  module: 
    loaders: [
      
        test: /\.js$/,
        loader: 'babel-loader',
        include: /src/,
        query: 
          presets: ["es2015"]
        
      ,
      
        test: /\.vue$/,
        loader: 'vue',
      ,
    ]
  ,
  vue: 
    loaders: 
      js: 'babel'
    
  

package.json

"devDependencies": 
    "webpack": "~2.2.1",
    "babel-core": "~6.23.1",
    "babel-loader": "~6.3.1",
    "babel-preset-es2015": "~6.22.0",
    "sass-loader": "~6.0.0",
    "node-sass": "~4.5.0",
    "extract-text-webpack-plugin": "~2.0.0-rc.3",
    "vue-template-compiler": "~2.2.4",
    "css-loader": "~0.27.3",
    "vue-loader": "~11.1.4"
  ,
  "dependencies": 
    "vue": "~2.2.4"
  

app/application.js

import Vue from 'vue'
import App from './app.vue'

new Vue(
  el: 'body',
  component:  App 
)

app/app.vue

<template>
  <div id="app">
  </div>
</template>

<script>

    export default 
      data () 
        return 
          msg: 'Hello from vue-loader!'
        
      
    

【问题讨论】：

尝试将 es2015 预设移动到单独的 .babelrc 文件。它应该看起来像这样 "presets": ["es2015"], "comments": false 更多信息请查看这里 github.com/bedakb/vuewp/blob/master/.babelrc 还要考虑不要将 vue 应用程序挂载到 body 标签，跨度>

@BelminBedak 我已经完成了，但仍然出现错误

啊，由于您使用的是 webpack 2，您现在不能省略 -loader 关键字。尝试将 loader: 'vue' 更改为 loader: 'vue-loader'

在导出默认 ... 之后你不是错过了关闭 </script> 吗？

在这里发现错字component: App 应该是组件 - 复数。

【参考方案1】：

你需要做一些额外的配置，加载器才能正常工作。

我强烈建议您使用vue-cli 进行设置，一切正常。

npm install -g vue-cli
vue init webpack-simple hello
cd hello
npm install
npm run dev

基本上，在您的webpack.config.js，您忘记/犯了以下错误：

1- 加载程序名称应为 loader: 'vue-loader' 而不是 loader: 'vue'。

2- 创建一个名为resolve 的密钥，其内容为：

alias: 
  vue$: 'vue/dist/vue.common.js',

3- 而这个密钥vue: ...loader: babel，不是必需的。

【讨论】：

我的 webpack 配置文件中有多个入口点，我已经在工作了。我不想通过 vue-cli 创建新项目造成更大的混乱。但是，将来我会以这种方式启动我的 vue 项目。奥布里加多 :)

哇！它以这种方式工作吗？奇怪的。无论如何，我也不担心使用这个创建一切的工具，但在 vue-cli 的情况下，它非常简单和微小。尝试在演示文件夹中创建，并查看 webpack.config。

你的绝对是要走的路。但是，如果您来自 Vue+Webpack 教程并且只想将vue-loader 添加到等式中，只需将以下内容添加到您的 webpack 配置中就足够了：module: loaders: [ test: /\.vue$/, loader: 'vue-loader', , ] 我真的不知道为什么 Vue 文档如此在这一点上晦涩难懂，并迫使您在 NPM 安装模块并向 webpack 配置中添加一些行就足够了时使用vue-cli。

【参考方案2】：

在使用vue的项目中，个人不建议单独配置webpack和vue-loader。可以直接使用vue官方脚手架，vue-cli。不用考虑这些配置，自动配置。vue-cli

如果您刚开始学习 Vue，这里有一个入门级演示。虽然只是一个小应用，但是涵盖了很多知识点（vue2.0 + vue-cli + vue-router + vuex + axios + mysql + express + pm2 + webpack），包括前端、后端、数据库等网站的一些必要元素，对我来说，学习意义重大，希望互相鼓励！

Vue Demo

【参考方案3】：

你在使用带有 ESLint 的 vue-cli 吗？ 如果这样做，则需要在最后一个元素事件和分号之后使用逗号。

import Vue from 'vue';
import App from './app.vue';

new Vue(
  el: 'body',
  components:  App ,
);