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

學習vue的同學都知道，想要生成一個vue項目，使用vue-cli腳手架工具直接生成項目即可，但是小編為了更加明白vue項目中一些項目文件的真正含義，從空文件開始構(gòu)建項目，其中還包括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

如果新建過程中出現(xiàn)以下錯誤：

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

正確的運行結(jié)果應該是：

3、繼續(xù)安裝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

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

到這里，我們的項目配置就完成了??！

解決vue-loader webpack版本出現(xiàn)的問題

出現(xiàn)問題

問題描述

主要是webpack打包時出現(xiàn)問題報錯如上

發(fā)現(xiàn)vue-loader 和 vue-template-compiler 版本不匹配

解決方法

npm instll
npm update

之后再運行就解決了

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論