webpack打包原理vue,webpack 安裝vue(兩種代碼模式compiler 和runtime)

 2023-12-06 阅读 16 评论 0

摘要:使用webpack安裝vue,import之后,運營項目報錯,如下: [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

使用webpack安裝vue,import之后,運營項目報錯,如下:

[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.


原因:

vue有兩種形式的代碼compiler(模板)模式,和runtime模式(運行時),vue模板的package.json中的main字段默認為runtime模式,指向的是'dist/vue.runtime.common.js'位置。

webpack打包原理vue、這是vue升級2.0之后就有的特點;如果main.js中,初始化vue這樣寫,這種形式compiler模式,所以就會出現上面的錯誤信息;

new Vue({el:'#app',template:'<App/>',components:{App}
});

解決辦法:

1 修改Vue實例的寫法:

new Vue({render:h=>h(App)
}).$mount('#app');

?

?

webpack的entry選項支持哪些類型,用vue-cli搭建的項目沒有問題,原因是webpack配置文件中有個別名配置:

resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' //內部為正則表達式 vue結尾的 } }

也就是說import Vue from 'vue' 這行代碼被解析為import Vue from ‘vue/dist/vue.esm.js’,直接指定了文件的位置,沒有使用main字段默認的文件位置

在vue-cli3中需要配置:

configureWebpack: { resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } }

或者直接這樣寫:

import Vue from 'vue/dist/vue.esm.js

?

vue與html5?來自:https://blog.csdn.net/wxl1555/article/details/83187647

?

轉載于:https://www.cnblogs.com/xiaofenguo/p/11382601.html

版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接:https://hbdhgg.com/5/190289.html

发表评论:

本站为非赢利网站,部分文章来源或改编自互联网及其他公众平台,主要目的在于分享信息,版权归原作者所有,内容仅供读者参考,如有侵权请联系我们删除!

Copyright © 2022 匯編語言學習筆記 Inc. 保留所有权利。

底部版权信息