Laravel9 使用 Vue2
Laravel9 with Vue2
我用命令安装了 Laravel 和 Vuejs
laravel 新博客
作曲家要求uire laravel/ui
php artisan ui vue
npm 安装vue-router
npm 安装
app.js
window.Vue = require('vue').default;
import router from "./router/router";
const app = new Vue({
el: '#app',
router
});
router/router.js
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: () => import('../components/ExampleComponent.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
执行这条命令时报错
npm 运行 观看
export 'default' (imported as 'VueRouter') was not found in 'vue-router' (possible exports: NavigationFailureType, RouterLink, RouterView, START_LOCATION, createMemoryHistory, createRouter, createRouterMatcher, createWebHashHistory, createWebHistory, isNavigationFailure, matchedRouteKey, onBeforeRouteLeave, onBeforeRouteUpdate, parseQuery, routeLocationKey, routerKey, routerViewLocationKey, stringifyQuery, useLink, useRoute, useRouter, viewDepthKey)
WARNING in ./resources/js/router/router.js 11:17-26
export 'default' (imported as 'VueRouter') was not found in 'vue-router' (possible exports: NavigationFailureType, RouterLink, RouterView, START_LOCATION, createMemoryHistory, createRouter, createRouterMatcher, createWebHashHistory, createWebHistory, isNavigationFailure, matchedRouteKey, onBeforeRouteLeave, onBeforeRouteUpdate, parseQuery, routeLocationKey, routerKey, routerViewLocationKey, stringifyQuery, useLink, useRoute, useRouter, viewDepthKey)
WARNING in ./resources/js/components/ExampleComponent.vue?vue&type=template&id=299e239e (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/ExampleComponent.vue?vue&type=template&id=299e239e) 6:30-48
export 'createStaticVNode' (imported as '_createStaticVNode') was not found in 'vue' (possible exports: default)
WARNING in ./resources/js/components/ExampleComponent.vue?vue&type=template&id=299e239e (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/ExampleComponent.vue?vue&type=template&id=299e239e) 10:9-19
export 'openBlock' (imported as '_openBlock') was not found in 'vue' (possible exports: default)
WARNING in ./resources/js/components/ExampleComponent.vue?vue&type=template&id=299e239e (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/ExampleComponent.vue?vue&type=template&id=299e239e) 10:23-42
export 'createElementBlock' (imported as '_createElementBlock') was not found in 'vue' (possible exports: default)
WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 1852:4-15
export 'onUnmounted' (imported as 'onUnmounted') was not found in 'vue' (possible exports: default)
WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 1853:4-17
export 'onDeactivated' (imported as 'onDeactivated') was not found in 'vue' (possible exports: default)
WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 1854:4-15
export 'onActivated' (imported as 'onActivated') was not found in 'vue' (possible exports: default)
WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 1867:52-70
export 'getCurrentInstance' (imported as 'getCurrentInstance') was not found in 'vue' (possible exports: default)
WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 1871:25-31
export 'inject' (imported as 'inject') was not found in 'vue' (possible exports: default)```
@quadmachine
package.josn
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"@popperjs/core": "^2.10.2",
"axios": "^0.25",
"bootstrap": "^5.1.3",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.11",
"sass-loader": "^11.0.1",
"vue": "^2.6.12",
"vue-loader": "^15.9.7",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"vue-router": "^4.0.13",
"vuex": "^4.0.2"
}
}
您为 vue2 安装了不兼容的依赖项。
尝试更改 vue-router
和 vuex
版本。
尝试安装以下版本 -
"vuex": "^3.6.2",
"vue-router": "^3.5.1",
我用命令安装了 Laravel 和 Vuejs
laravel 新博客
作曲家要求uire laravel/ui
php artisan ui vue
npm 安装vue-router
npm 安装
app.js
window.Vue = require('vue').default;
import router from "./router/router";
const app = new Vue({
el: '#app',
router
});
router/router.js
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: () => import('../components/ExampleComponent.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
执行这条命令时报错 npm 运行 观看
export 'default' (imported as 'VueRouter') was not found in 'vue-router' (possible exports: NavigationFailureType, RouterLink, RouterView, START_LOCATION, createMemoryHistory, createRouter, createRouterMatcher, createWebHashHistory, createWebHistory, isNavigationFailure, matchedRouteKey, onBeforeRouteLeave, onBeforeRouteUpdate, parseQuery, routeLocationKey, routerKey, routerViewLocationKey, stringifyQuery, useLink, useRoute, useRouter, viewDepthKey)
WARNING in ./resources/js/router/router.js 11:17-26
export 'default' (imported as 'VueRouter') was not found in 'vue-router' (possible exports: NavigationFailureType, RouterLink, RouterView, START_LOCATION, createMemoryHistory, createRouter, createRouterMatcher, createWebHashHistory, createWebHistory, isNavigationFailure, matchedRouteKey, onBeforeRouteLeave, onBeforeRouteUpdate, parseQuery, routeLocationKey, routerKey, routerViewLocationKey, stringifyQuery, useLink, useRoute, useRouter, viewDepthKey)
WARNING in ./resources/js/components/ExampleComponent.vue?vue&type=template&id=299e239e (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/ExampleComponent.vue?vue&type=template&id=299e239e) 6:30-48
export 'createStaticVNode' (imported as '_createStaticVNode') was not found in 'vue' (possible exports: default)
WARNING in ./resources/js/components/ExampleComponent.vue?vue&type=template&id=299e239e (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/ExampleComponent.vue?vue&type=template&id=299e239e) 10:9-19
export 'openBlock' (imported as '_openBlock') was not found in 'vue' (possible exports: default)
WARNING in ./resources/js/components/ExampleComponent.vue?vue&type=template&id=299e239e (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/ExampleComponent.vue?vue&type=template&id=299e239e) 10:23-42
export 'createElementBlock' (imported as '_createElementBlock') was not found in 'vue' (possible exports: default)
WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 1852:4-15
export 'onUnmounted' (imported as 'onUnmounted') was not found in 'vue' (possible exports: default)
WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 1853:4-17
export 'onDeactivated' (imported as 'onDeactivated') was not found in 'vue' (possible exports: default)
WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 1854:4-15
export 'onActivated' (imported as 'onActivated') was not found in 'vue' (possible exports: default)
WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 1867:52-70
export 'getCurrentInstance' (imported as 'getCurrentInstance') was not found in 'vue' (possible exports: default)
WARNING in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 1871:25-31
export 'inject' (imported as 'inject') was not found in 'vue' (possible exports: default)```
@quadmachine
package.josn
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"@popperjs/core": "^2.10.2",
"axios": "^0.25",
"bootstrap": "^5.1.3",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.11",
"sass-loader": "^11.0.1",
"vue": "^2.6.12",
"vue-loader": "^15.9.7",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"vue-router": "^4.0.13",
"vuex": "^4.0.2"
}
}
您为 vue2 安装了不兼容的依赖项。
尝试更改 vue-router
和 vuex
版本。
尝试安装以下版本 -
"vuex": "^3.6.2",
"vue-router": "^3.5.1",