【bug】vue-cli 3.0報錯的解決辦法

先上bug圖片

bug說明：初裝vue_cli3.0寫了個組件，運行錯誤，顯示如圖，

代碼提示：[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.runtime.esm.js，造成的不能正常運行，查看cli2X的版本，在webpack.base.conf.js配置文件中多加了一段代碼，將 vue/dist/ package.json配置文件的"main": "dist/vue.runtime.common.js",改為引用代碼中的引用vue/dist.vue.esm.js文件，意思就是說webpack.base.conf.js這個文件已經將vue/dist.package.json的錯誤引用糾正成vue/dist.vue.esm.js

所以cli2x運行不會報錯，cli3版本對比cli2也要增加這樣的修改，才能正常使用，方法如下

 

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

 

bug修改：對照cli2X，修改vue_cli3.0的配置文件，添加 配置文件：vue.config.js 在項目的根目錄下,目的是修改在引入vue時，不要采用runtime形式的文件,而采用 dist/vue.esm.js形式文件，將這段代碼復制粘貼到vue,config.js中

重啟服務，刷新，正常顯示

const path = require('path')
function resolve (dir) {
    return path.join(__dirname,dir)
  }
  
module.exports = {
  
    configureWebpack: config => {
        config.resolve = {
           extensions: ['.js', '.vue', '.json',".css"],
            alias: {
              'vue$': 'vue/dist/vue.esm.js',
              '@': resolve('src'),
            }
        }
    },
}