main.js中Vue实例使用templates写法

1.main.js 中 new Vue()实例

import App from './App.vue'

import router from './router'

import store from './store'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

new Vue({

  el:'#app',

  router,

  store,

  components:{App},

  template:'<App/>'

})

 

2.控制台出现报错

原因分析:vue有两种形式的代码 compiler（模板）模式和runtime模式（运行时），vue模块的package.json的main字段默认为runtime模式， 指向了"dist/vue.runtime.common.js"位置。

在项目配置的时候，默认 npm 包导出的是运行时构建，即 runtime 版本，不支持编译 template 模板。

vue 在初始化项目配置的时候，有两个运行环境配置的版本：Compiler 版本、Runtime 版本。

其主要区别在于：

Compiler 版本：
可以对 template 模板内容进行编译（包括字符串模板和可以绑定的 html 对象作为模板）

Runtime 版本：

使用 vue-loader 加载.vue 文件（组件文件）时，webpack 在打包过程中对模板进行了渲染。

解决思路: import Vue from ‘vue’ 这行代码被解析为 import Vue from ‘vue/dist/vue.common.js’，现在手动修改引入路径'vue/dist/vue.esm.js'

1).报错已经给出了解决方案:将预编译的tempates放入render函数中执行,所以修改为  new Vue({

      el:'#app',

      router,

      store,

      render:h=>h(App)

     })

2) 在vue.config.js配置文件中

module.exports = {
configureWebpack: config => {
config.resolve = {
alias: {
vue$: "vue/dist/vue.esm.js"
}
};

或者

module.exports = {

    runtimeCompiler:true

};

3)直接在main.js引入vue的路径改为

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

报错

将router中的index.js的vue引入路径也修改成

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

4)问题解决