你好，
我正在尝试使用laravel框架构建一个Web应用程序。我正在为某些页面使用vue组件。当前的app.js文件正在运行。但是，当我运行＆＃39; npm run watch＆＃39;，＆＃39; npm run prod＆＃39;等时 - 组件不会出现在任何带有vue组件的页面上。也没有发生任何错误。我已经尝试清除所有内容并运行＆nbsp; npm install＆＃39;它仍然会发生。看来新的app.js文件不起作用。它也发生在我的本地环境和开发服务器上。
package.json文件：
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.16.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"bootstrap-sass": "^3.3.7",
"cross-env": "^5.0.1",
"gsap": "^1.20.2",
"jquery": "^2.2.3",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"moment": "^2.18.1",
"vue": "^2.1.10"
},
"dependencies": {
"exports-loader": "^0.6.4",
"expose-loader": "^0.7.3",
"fs": "0.0.1-security",
"generate": "^0.14.0",
"imports-loader": "^0.7.1",
"lib": "^3.0.1",
"node-sass": "^4.5.3",
"package": "^1.0.1",
"vue-ckeditor2": "^1.15.0",
"vue-resource": "^1.3.4",
"vue-stripe": "^0.1.3",
"vue2-timepicker": "^0.1.4",
"vuejs-datepicker": "^0.9.18",
"vuex": "^2.3.1"
}
}
webpack.mix.js文件：
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/assets/js/app.js', 'public/assets/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.webpackConfig({
resolve: {
alias: {
"TweenLite": "gsap/src/uncompressed/TweenLite"
}
},
module: {
rules: [{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: '$'
}]
}]
}
});
输出＆＃39; npm run watch＆＃39;：
➜ YJA git:(master) npm run watch
> @ watch /YJA
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
10% building modules 1/1 modules 0 active
Webpack is watching the files…
95% emitting
DONE Compiled successfully in 4961ms 1:08:57 PM
Asset Size Chunks Chunk Names
fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1 20.1 kB [emitted]
fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.woff2?448c34a56d699c29117adc64c43affeb 18 kB [emitted]
fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.woff?fa2772327f55d8198301fdb8bcfc8158 23.4 kB [emitted]
fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.ttf?e18bbf611f2a2e43afc071aa2f4e1512 45.4 kB [emitted]
fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.svg?89889688147bd7575d6327160d64e760 109 kB [emitted]
/assets/js/app.js 1.53 MB 0 [emitted] [big] /assets/js/app
/css/app.css 147 kB 0 [emitted] /assets/js/app
如果我能提供其他任何信息，请告知我们。
编辑： /resources/assets/js/app.js
require('./bootstrap');
// Vue
window.Vue = require('vue');
import axios from 'axios';
import UserAdmin from "./components/user/UserAdmin.vue";
import EventRegistration from "./components/event/EventRegistration.vue";
import NewEvent from "./components/event/event_new/NewEvent.vue";
import EventRegistered from "./components/event/EventRegistered.vue";
import EventStatus from "./components/event/event_update/EventStatus.vue";
import EventFeedback from "./components/event/event_update/EventFeedback.vue";
import EventUpdate from "./components/event/event_update/EventUpdate.vue";
import EventUpdatedAt from "./components/event/event_update/EventUpdatedAt.vue";
import NewAddon from "./components/addon/NewAddon.vue";
import UpdateAddon from "./components/addon/UpdateAddon.vue";
import AdminNotifications from "./components/admin/AdminNotifications.vue";
import AdminTransactions from "./components/admin/AdminTransactions.vue";
Vue.component('Banner', require('./components/Banner.vue'));
Vue.component('appContactForm', require('./components/ContactForm.vue'));
Vue.component('appSocial', require('./components/Social.vue'));
Vue.component('accountDashboard', require('./components/account/AccountDashboard.vue'));
export const userBus = new Vue();
export const stripeBus = new Vue();
export const eventBus = new Vue();
const app = new Vue({
el: '#app',
components: {
userAdmin: UserAdmin,
eventRegistration: EventRegistration,
newEvent: NewEvent,
eventRegistered: EventRegistered,
eventUpdatedAt: EventUpdatedAt,
eventStatus: EventStatus,
eventFeedback: EventFeedback,
eventUpdate: EventUpdate,
newAddon: NewAddon,
updateAddon: UpdateAddon,
adminNotifications: AdminNotifications,
adminTransactions: AdminTransactions
}
});