使用vue cli搭建vue專案問題解決方案

工欲善其事必先利其器,安裝所需環境

安裝node預設安裝npm，不需要重複安裝npm。安裝完成後，可以命令列工具中輸入 node -v 和 npm -v，如果能顯示出版本號，就說明安裝成功。

安裝全域性vue-cli腳手架

npm install -g vue-cli

出現如下問題：

安裝vue-cli(檢查vue-cli版本$ vue -v 注意v是大寫的)

安裝好了node後，我們可以直接在控制台通過命令安裝vue-cli

npm install -g vue-cli //-g 表示全域性安裝vue-cli

這種安裝方式比較慢，推薦使用國內映象來安裝，所以我們先設定cnpm，在控制台安裝cnpm 命令，安裝成功後，我們也可以通過cnpm -v來檢視對應的安裝版本。

當然，如果安裝失敗，可以使用 npm cache clean 清理快取，然後再重新安裝。後面的安裝過程中，如有安裝失敗的情況，也需要先清理快取。

或者通過命令npm config set strict-ssl false關閉npm的https

npm config set strict-ssl false //關閉npm的https //npm cache clean 如果安裝失敗，請開啟該注釋，然後兩句一起執行 npm install -g cnpm --registry=

然後使用 cnpm 安裝 vue-cli

cnpm install vue-cli -g

如果提示「無法識別『vue』」，有可能是 npm 版本過低，可以使用 npm install -g npm 來更新版本

npm install -g npm //公升級npm的版本到最新版

打包上線

自己的專案檔案都需要放到 src 資料夾下，相關的部分靜態資源需要放在static資料夾下（建議使用less或者sass的方式來進行css的預處理，可以保證對應的靜態資源都進行打包）

專案開發完成之後，可以輸入 npm run build 來進行打包工作

npm run build

注意的問題：

1、有時候可能會提示資源過大，可以採用**：來將壓縮一下

2、出現報錯資訊 ***/***/aa***.js from uglifyjs unexpected token: punc (())的時候，是因為專案中沒有.babelrc檔案或者沒有配置.babelrc檔案。需要在專案的根目錄新增乙個檔案.babelrc，然後配置：

3、如果出現錯誤：couldn』t find preset 「es2015」 relative to directory的錯誤，是因為沒有安裝依賴包：babel-preset-es2015或者安裝的失敗，需要重新安裝。

npm install babel-preset-es2015 --s**e-dev //--s**e表示將對應的依賴寫入package.json中的dependencies生成模組中，--s**e-dev表示將對應的依賴寫入package.json中的devdependencies開發模組中

4、需要將**打包成es5模式的**，還需要在build資料夾中webpack.base.conf.js檔案的module版塊中加入如下**：

module: }]
}

打包完成後，會生成 dist 資料夾，如果已經修改了檔案路徑，可以直接開啟本地檔案檢視

專案上線時，只需要將 dist 資料夾放到伺服器就行了。