1. 程式人生 > >【bug】vue-cli 3.0報錯的解決辦法

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

文件中 分享圖片 not main res idt 說明 exports 修改

先上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/ main.js的"main": "dist/vue.runtime.common.js",改為引用代碼中文件

1   resolve: {
2     extensions: [.js, .vue, .json],
3     alias: {
4       vue$: vue/dist/vue.esm.js,
5       @: resolve(src),
6     }
7   },

bug修改:對照cli2X,修改vue_cli3.0的配置文件,添加 配置文件:vue.config.js 在項目的根目錄下,目的是修改在引入vue時,不要采用runtime形式的文件,而采用 dist/vue.esm.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‘),
            }
        }
    },
}

  

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