vue不同创建版本之运行时 + 编译器 vs. 只包含运行时

vue的安装版本可分为运行时 + 编译器和只包含运行时两种，这两种版本的区别在于是否含有编译器。

我们通过vue-cil脚手架安装完项目后

只包含运行时

main.js中

import App from './App.vue'

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

vue的实例里面有render方法来编译App.vue这个模块这是后我们看到的页面就是app.vue文件的页面

app.vue文件

<div id="app">
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view/>
</div>

此时浏览器查看器中的id为app节点就是app.vue中的。

运行时 + 编译器：

vue项目中有个index.html，整个项目的所有代码都会通过这个html文件来显示到浏览器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>WorkNewProject</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but WorkNewProject doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
      <router-view></router-view>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>

只包含运行时需要在index.html文件的id为app的节点中加入<router-view></router-view>这个标签。

此时mian.js中的vue实例的render是可以去掉了。浏览器查看器中看到的app.js就是index.html文件中的id为app的dom节点。

但是有一点值得注意的是我们项目是通过脚手架来搭建的

脚手架默认使用只包含运行时的 Vue 构建版本。所以如果要使用运行时 + 编译器：需要在脚手架中配置

runtimeCompiler: true

否则会爆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不同创建版本之运行时 + 编译器 vs. 只包含运行时

猜你喜欢