在使用现有Laravel混合添加vue-loader时遇到问题

时间:2019-03-08 15:54:34

标签: php laravel vue.js vue-loader

希望使用单个文件组件,所以我想使用Vue Loader。我最近添加了laravel mix,我的webpack.mix.js如下:

webpack.mix.js

let mix = require('laravel-mix');

mix .js('resources/assets/js/app.js', 'public/js')

package.json

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "laravel-mix": "^4.0.14",
    "lodash": "^4.16.2",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.17.2",
    "sass-loader": "^7.1.0",
    "vue": "^2.0.1",
    "vue-loader": "^15.7.0",
    "vue-resource": "^1.0.3",
    "vue-template-compiler": "^2.6.8"
  }
}

按照vue.js指南(https://vue-loader.vuejs.org/guide/#vue-cli)运行npm install -D vue-loader vue-template-compiler 之后,我将其手动添加到了webpack.mix.js中:

webpack.mix.js

let mix = require('laravel-mix');

mix .js('resources/assets/js/app.js', 'public/js')

mix.webpackConfig({
    module: {
        rules: [
              {
                test: /\.vue$/,
                loader: 'vue-loader'
              },
              {
                test: /\.js$/,
                loader: 'babel-loader'
              },
              {
                test: /\.css$/,
                use: [
                  'vue-style-loader',
                  'css-loader'
                ]
              }
        ]
      },
    plugins: [
        new VueLoaderPlugin()
    ]
});

然后运行npm run watch会导致:“错误:规则只能有一个结果源”

0 个答案:

没有答案