在Webpack中導入Vue：三種方法完美解決You are using the runtime-only build of Vue

若要在webpack環境下使用vue
首先 需在項目中安裝Vue：
在項目根目錄下輸入：cnpm i vue -S安裝vue

main.js：

import Vue from "vue"

var vm=new Vue({
    el:"#app",
    data:{
        msg:"test"
    }
})

index.html：

<div id="app">
        {{msg}}
</div>

然而…

在使用的時候會報錯

原因：

這是因爲 在webpack中使用import Vue from "vue"導入的Vue的功能是不完整的 相當於只是個閹割版

解決方法：

首先 回顧一下導入包時的查找規則：

• 1、查找項目根目錄中有沒有名爲node_modules的文件夾
• 2、在node_modules根據包名查找對應名稱的文件夾
• 3、若能找到 則在該文件夾下查找名爲package.json的配置文件
• 4、若能找到 則從package.json文件中查找main屬性
  該屬性指定了當前包在被加載時的的入口文件(即引入的文件)到底是哪個

由此可知 解決方法共有三種：

1、解決方法一：

在node_modules\vue下的package.json裏的main屬性默認爲：

"main": "dist/vue.runtime.common.js"

那麼 只要手動修改爲完整版的即可
修改爲：

"main": "dist/vue.js"

2、解決方法二：

在main.js裏使用import導入的同時 指定文件的路徑：

import Vue from "../node_modules/vue/dist/vue.js"

3、解決方法三：

在webpack.config.js裏添加一個resolve節點 配置alias屬性：

var path=require("path")
var htmlWebpackPlugin=require("html-webpack-plugin")

module.exports={
    entry:path.join(__dirname,"./src/main.js"),
    output:{
        path:path.join(__dirname,"./dist"),
        filename:"bundle.js"
    },
    resolve:{
        // 配置別名
        alias:{
            "vue$":"vue/dist/vue.js" // 若是以vue結尾的 則用指定路徑的包
        }
    }
}

---