场景
app.component('ca', {
template: '<div>123456</div>',
data: function(){
return{
text_a: 'aaaaa'
}
}
})
template 会在编译的时候警告
[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js"....
意思: 组件提供模板选项,但是在Vue的这个构建中不支持运行时编译,配置你的bundler别名 vue: vue/dist/vue.esm-bundler.js
vue 的使用环境,分为两种环境,一种是开发,一种是生产,
开发环境下:
基于vue 的不同环境需要使用的vue的代码也是不一样的,如下表:如果是vue2的话,需要依赖构建工具,如webpack, glup 等, 流程是 先使用对应的构建工具来进行构建编译生成一个一个的bundle, 然后才是运行。
如果是vue3的话,有两种方式,一种是沿用vue2的开发模式,另一种是 使用 vite这个构建工具,流程是 基于现代浏览器的特点, 先查找相关的引用,然后在编译,在运行
生成环境,都需要打包生成bundle 进行部署。
image.png
解决办法:
vue3
- 使用vite 构建: 项目根目录下面建立
vite.config.js
配置别名, 详细配置
alias: {
'vue': 'vue/dist/vue.esm-bundler.js' // 定义vue的别名,如果使用其他的插件,可能会用到别名
},
- 使用vue-cli 进行构建,项目根目录下面建立 vue.config.js 配置一个属性
module.exports = { runtimeCompiler: true } // 确定是运行时候编译
原文链接:https://blog.csdn.net/qq_41499782/article/details/112505665