2.Vue項目的基本配置

1、項目初始化安裝完成後，目錄如下

目錄介紹：

-build：建構腳本目錄

|-build.js：生産環境建構腳本

|-check-versions.js：檢查npm，node.js版本

|-utils.js：建構相關工具方法

|-vue-loader.conf.js：配置了css加載器以及編譯css之後自動添加字首

|-webpack.base.conf.js：webpack基本配置

|-webpack.dev.conf.js：webpack開發環境配置

|-webpack.prod.conf.js：webpack生産環境配置

-config

|-dev.env.js

|-index.js

|-prod.env.js

-node_modules

-src

|-assets：資源目錄，放置一些圖檔或者公共js、公共css。這裡的資源會被webpack建構；

|-components：元件目錄

|-router：路由檔案夾

|-|-index.js：配置路由路徑的檔案

|-App.vue：根元件

|-main.js：入口js檔案

-static：靜态資源目錄

-index.html：首頁入口檔案

-package.json：npm包配置檔案

2、基本修改

項目建立完成以後，我們還需要修改部分地方。

2.1、在開發時，我們運作項目還需在浏覽器手動輸入位址，其實我們可以讓項目自動打開浏覽器

打開config->index.js

找到autoOpenBrowser設定為true，即可

autoOpenBrowser: true
           

2.2、我們的頁面需要和其它檔案分開，是以我們需要在src下建立一個新的檔案夾：比如views，此檔案夾隻需要放我們的頁面檔案，而可以重複使用的頁面，我們則可以把它放入components中。

2.3、config中的檔案配置

我們在開發中，與在生産環境中所使用到的部配置設定置是不一樣的，那麼我們對這些配置肯定需要單獨配置，比如請求接口位址等。

那麼這些我們就需要在

-config

|-dev.env.js

|-prod.env.js

這兩個js檔案中進行配置了

dev.env.js檔案：

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  VUE_BASE_URL: '"http://127.0.0.1"',//開發産環境的接口
  VUE_WS_URL: '"wss://127.0.0.1"',//開發環境socket 連接配接位址
})
           

prod.env.js檔案：

module.exports = {
  NODE_ENV: '"production"',
  VUE_BASE_URL: '"http://prod.cn"',//生産環境的接口
  VUE_WS_URL: '"wss://prod.cn"',//生産環境socket 連接配接位址
}
           

這樣我們在使用npm run dev時候，擷取的值則是dev.env.js檔案的；使用npm run build時候，擷取的值則是prod.env.js檔案的。

後續若還有需要補充的，我将會在此進行補充，或建立文章