vue-loader和webpack項目配置及npm錯誤問題的解決

vue-loader和webpack項目配置及npm錯誤

學習vue的同學都知道，想要生成一個vue項目，使用vue-cli腳手架工具直接生成項目即可，但是小編為瞭更加明白vue項目中一些項目文件的真正含義，從空文件開始構建項目，其中還包括webpack的一些知識點

1、在VS編輯器打開終端，npm init初始化，生成package.json文件

2、安裝項目中所需要用到的包，例如webpack 、 vue 、 vue-loader等

使用命令npm i webpack vue vue-loader進行安裝，如果此時報錯，可以一個一個的進行安裝，npm i webpack 、npm i vue 、npm i vue-loader

如果新建過程中出現以下錯誤：

可以看一下package.json下的name字段是不是項目名字和你安裝的那個包名字相同瞭，如果一樣就會報那個錯，把項目名字改成和安裝不沖突的名字

正確的運行結果應該是：

3、繼續安裝css-loader以及vue-template-compiler

npm i css-loader vue-template-compiler

4、新建src文件夾，新加app.vue，進行編寫基本的代碼

5、此時的文件是不可能進行編譯的，但是當我們想要運行此項目時，可以使用webpack，webpack是一個打包器；

在根目錄下建立webpack.config.js，並在裡面添加配置

entry是我們這個項目文件的一個入口文件，output是打包以後的輸出文件，__dirname 是表示當前文件的名字，module裡面是一些loader配置

6、入口文件index.js文件也進行簡單的編輯：

7、最後進行運行npm run build

根據webpack.config.js的配置，會在根目錄生成一個文件夾dist，裡面是輸出的一些文件。

到這裡，我們的項目配置就完成瞭！！

出現問題

主要是webpack打包時出現問題報錯如上

發現vue-loader 和 vue-template-compiler 版本不匹配

npm instll
npm update

之後再運行就解決瞭

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。