vue 打包路由报错_Webpack4+vue+ssr打包后，访问路由出错

不念不忘少年蓝@ 2023-01-09 01:13 175阅读 0赞

项目详情：一个

Todo

应用，有

/app

\`(主页面)和

/login

(登录页面)两个路由

错误详情

在做

ssr

渲染时，我使用了路由懒加载，然后

用webpack打包前端代码时，打包成功了

，然后启动服务端端口时访问主页面出错了(但是

生成环境没有问题

，生产环境调试是使用webpack-dev-server + koa启动两个端口)，生产环境访问出错原因是：

TypeError: Cannot read property 'call' of undefined

at r (webpack/bootstrap:39:0)

at Object.<anonymous> (client/views/todo/todo.vue?6149:6:0)

at r (webpack/bootstrap:39:0)

at Object.<anonymous> (client/views/todo/todo.vue?7847:6:0)

at r (webpack/bootstrap:39:0)

at VueComponent.s (client/views/todo/todo.vue:11:0)

at VueComponent.c (node\_modules/vue-loader/lib/runtime/component-normalizer.js:65:0)

at callHook (D:\\Editors\\WebStorm\\Files\\20180423-imooc-vue-todo-further\\node\_modules\\vue\\dist\\vue.runtime.common.js:2919:21)

at VueComponent.Vue.\_init (D:\\Editors\\WebStorm\\Files\\20180423-imooc-vue-todo-further\\node\_modules\\vue\\dist\\vue.runtime.common.js:4624:5)

at new VueComponent (D:\\Editors\\WebStorm\\Files\\20180423-imooc-vue-todo-further\\node\_modules\\vue\\dist\\vue.runtime.common.js:4796:12)

初步推断错误原因

我百度了很多解答, 可是都无效，我

怀疑是组件懒加载出错

了，因为

Login组件

懒加载没有问题，而

Todo组件

加载则出错，它们之间的区别是Login组件里面

没有子组件

，而Todo里面还

有子组件

。

百思不得其解，望大佬们解答。

部分代码

下面是

webpack打包

的相关配置：

webpack基本配置baseConfig：

const baseConfig = \{

mode: process.env.NODE\_ENV || 'production', // webpack 4 的配置，针对不同模式进行优化，必须

target: 'web',

entry: \{

app: path.join(\_\_dirname, '../client/client-entry.js')

\},

output: \{

path: path.join(\_\_dirname, '../public'),

filename: 'bundle.\[hash:8\].js',

// 这里的配置需要加在devServer上的historyApiFallback中

publicPath: 'http://127.0.0.1:8080/public/'

\},

module: \{

rules: \[

test: /\\.(vue|jsx|js)$/,

loader: 'eslint-loader',

enforce: 'pre' /\* loader正式加载前先使用这个loader \*/

\},

test: /\\.vue$/,

loader: 'vue-loader',

options: createVueLoaderOptions(isDev)

\},

test: /\\.jsx$/,

loader: 'babel-loader'

\},

test: /\\.js$/,

loader: 'babel-loader',

\},

test: /\\.(jpg|jpeg|png|svg|gif)$/,

use: \[

loader: 'url-loader',

options: \{

limit: 1024,

生成环境下的配置：

// 生产环境

config = merge(baseConfig, \{

mode: 'production',

entry: \{

app: path.join(\_\_dirname, '../client/client-entry.js')

\},

output: \{

filename: '\[name\].\[chunkhash:8\].js',

publicPath: '/public/'

\},

module: \{

rules: \[

test: /\\.styl$/,

use: ExtractPlugin.extract(\{

/\* style-loader包裹js代码，写入html，所以不需要写入 \*/

fallback: 'style-loader',

use: \[

'css-loader',

loader: 'postcss-loader',

options: \{

sourceMap: true

\},

'stylus-loader'

\})

\},

plugins: defaultPlugins.concat(new ExtractPlugin('styles.\[chunkhash\].css')),

optimization: \{

splitChunks: \{

chunks: 'all'

\},

runtimeChunk: true

\})

下面是路由懒加载的部分代码：

// 访问/login没有问题，而访问/app出错

const Todo = () => import('../views/todo/todo.vue')

const Login = () => import('../views/login/login.vue')

// xxx

export default \[

path: '/',

redirect: '/app'

\},

path: '/app',

component: Todo,

\},

path: '/login',

component: Login

如果不使用路由懒加载的话，webpack打包后，生产环境访问就没有问题。

// 不使用路由懒加载

import Todo from '../views/todo/todo.vue'

import Login from '../views/login/login.vue'

// xxx

export default \[

path: '/',

redirect: '/app'

\},

path: '/app',

component: Todo,

\},

path: '/login',

component: Login

另外贴上

和

todo.vue

组件的代码：

<div>

这是登录界面

</div>

</template>

export default \{

metaInfo: \{

title: 'Login - Todo App'

</script>

todo.vue:

<input

type="text"

class="add-input"

@keyup.enter="addTodo"

autofocus="autofocus"

placeholder="接下来要做什么？"

<Item

v-for="todo in filterTodos"

:todo="todo"

:key="todo.id"

@del="deleteTodo"

></Item>

<Tabs :todos="todos"

:filter="filter"

@changeFilter="changeFilter"

@clearCompleted="clearCompleted"></Tabs>

</section>

</template>

import Item from './item.vue'

import Tabs from './tabs.vue'

let id = 0

export default \{

metaInfo: \{

title: 'The Todo App'

\},

components: \{

Item,

Tabs

\},

props: \['id'\],

data () \{

return \{

filter: 'all',

todos: \[\]

\},

mounted () \{

console.log(this.$route)

console.log('id: ', this.id)

\},

computed: \{

filterTodos () \{

let state = this.filter

if (state === 'all') \{

return this.todos

\} else if (state === 'active') \{

return this.todos.filter(todo => !todo.completed)

\} else \{

return this.todos.filter(todo => todo.completed)

\},

methods: \{

addTodo (e) \{

this.todos.unshift(\{

id: id++,

content: e.target.value.trim(),

completed: false

\})

e.target.value = ''

\},

deleteTodo (id) \{

this.todos.splice(this.todos.findIndex(todo => todo.id === id), 1)

\},

clearCompleted () \{

this.todos = this.todos.filter(todo => !todo.completed)

\},

changeFilter (state) \{

this.filter = state

</script>

.todo-wrapper \{

width 600px

margin 0 auto

padding 10px

box-shadow 0 0 5px \#666

background-color \#fff

.add-input \{

position relative

width 100%

padding 16px

outline none

border none

font-size 24px

line-height 40px

box-shadow inset 0 -2px 1px rgba(0, 0, 0, 0.03)

</style>

感谢。

vue 打包路由报错_Webpack4+vue+ssr打包后，访问路由出错

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 vue 打包路由报错_Webpack4+vue+ssr打包后，访问路由出错

相关 Vue---路由重复点击报错

相关路由 vue-router 路由守卫路由重定向路由嵌套路由守卫路由命名路由懒加载

相关 VUE_vue动态路由，引入所有路由，vue路由模块化

相关 vue 路由、嵌套路由、动态路由

相关 VUE —— 9、路由（二级路由、路由拦截）、axios

相关 VUE —— 9、路由（二级路由、路由拦截）、axios

相关前端路由与后端路由

相关 vue2路由--嵌套路由

相关 vue 路由嵌套(二级路由)