在學習vue-loader,依照影片中的做法,
分別新建了一下檔案
1 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<app></app>
<script src="build.js"></script>
</body>
</html>
2 main.js
import Vue from "vue";
3 webpack.config.js
module.exports={
entry:'./main.js',
output:{
path:__dirname,
filename:"build.js"
}
}
4 空的App.vue檔
5 通過npm init後改了scripts為執行的指令
6 透過cnpm install webpack webpack-dev-server下載了webpck webpack-dev-server
最後通過 npm run dev 後,報錯如下
ERROR in ./main.js
Module not found: Error: Can't resolve 'vue' in '....vue-loader-demo'
@./main.js 1:0 -22
@multi ./~/_webpack-dev-server@2.4.5@webpack-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./main.js
webpack:Failed to compile.
跪謝 各位大神了 在線等
阿神2017-05-19 10:16:31
webpack 就那點配置? ? ?
怎麼編譯vue啊?
弄個vue loader吧
module: {
loaders: [{
test: /\.vue$/,
loader: 'vue'
}]
}
给我你的怀抱2017-05-19 10:16:31
先依照以下兩步驟試試看:
1.本地安裝vue-loader依賴
cnpm isntall vue-loader --save-dev
安裝成功後,vue-loader-demo資料夾下的package.json,devDependencies項目會顯示vue-loader和對應的版本號,例如:
"devDependencies": {
"vue-loader": "^11.3.4"
}
2.增添webpack中對vue-loader的設定
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]}