webpack 错误信息总结

最新推荐文章于 2022-10-28 09:00:07 发布

xggg0929

最新推荐文章于 2022-10-28 09:00:07 发布

阅读量1.5k

点赞数

分类专栏：相关技术软件 JavaScript 文章标签： webapck

JavaScript 同时被 2 个专栏收录

13 篇文章

订阅专栏

相关技术软件

5 篇文章

订阅专栏

本文总结了Vue.js开发过程中常见的八种错误及其解决方案，包括属性未定义、挂载点选择不当、模板编译问题、Webpack配置错误等，帮助开发者快速定位并解决问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

错误一：vue.js:515 [Vue warn]: Property or method “name” is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instance)

name 在data那里没有定义。 
要这样定义：
export default {
    name: 'app',
    data() {
        return {
           name: ''
        }
    },
    ......

错误2：Do not mount Vue to or - mount tonormal elements instead.

vue1.x 允许开发者以 <body> 或 <html> 作为根实体的挂载点，
但到了VueJS2.0 后，只能通过 独立的节点挂载 ，如:div 等。

否则会产生错误，警告讯息如下：
"Do not mount Vue to <html> or <body> - mount tonormal elements instead."

换成用独立的 DOM 节点，如 <divid="app"></div>，就可以正常运作了。

错误3： [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.(found in )

上述报错是发生在使用vue框架时,单纯的向Vue中绑定一个template,如下：
new Vue({
    el: '#app',
    template:"<div>wret</div>"
    // router,
    // render: h => h(App)
})
这是什么意思呢?
运行时构建不包含模板编译器，因此不支持 template 选项，只能用 render 选项，
但即使使用运行时构建，在单文件组件中也依然可以写模板，
因为单文件组件的模板会在构建时预编译为 render 函数。
上面一段是官方api中的解释。就是说，如果我们想使用template，
我们不能直接在客户端使用npm install之后的vue。此时，再去看查vue模块，添加几行

webpack.config.js中添加:
resolve: {
    alias: {
        'vue': 'vue/dist/vue.js'
    }
}
再运行，没错ok了。

错误4：webpack提示 [HMR] Hot Module Replacement is disabled
刷新页面提示：Uncaught Error: [HMR] Hot Module Replacement is disabled，页面中的内容没有渲染出来

webpack的配置（webpack.config.js）里面加这个：
plugins: [
    new webpack.HotModuleReplacementPlugin()
]

错误5：unknown property ‘loaders’….

webpack v2 之后都用rules 了
loaders改为rules

错误6：Module build failed: TypeError: this._init is not a function

在一些Webpack的版本中，loader不能用简写省去 -loader 的形式。因此vue-loader应该使用全拼
的形式。 
webpack.config.js 文件应该改成这样：
{
    test: /\.vue$/,
    loader: 'vue-loader', /* 原来的'vue'改成'vue-loader' */
    options: {
      // vue-loader options go here
    }
},

错误7：WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (250 kB). This can impact web performance.

webpack.config.js 文件新增：
performance: {
  hints: false
}

错误8：The ‘mode’ option has not been set. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for this environment.

webpack.config.js增加:
mode: 'development'

在Webpack中，提供了mode变量，用于配置运行环境，mode的值可以为
development，表示的是开发模式，或者是production，表示的是生产模式。
package.json文件修改配置项为：
"scripts": {
　　"dev": "webpack --mode development",
　　"build": "webpack --mode production"
}
npm run dev  这个时候dist里面的文件的不是压缩过的
是npm run build 这个时候dist的main.js就是压缩了的。

转自https://blog.youkuaiyun.com/qq_32936643/article/details/79610374