希望使用单个文件组件,所以我想使用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
会导致:“错误:规则只能有一个结果源”