首先我們來看一下使用Vue-cli2與Vue-cli2之後的版本(這裡以Vue-cli2版本為例)建立專案目錄結構的不同：

cli2（左圖）與cli4（右圖）建立專案的目錄

從上圖可以看出Vue-cli2中有static資料夾，Vue-cli4是移除了static資料夾，但新增了public資料夾，並將index.html檔案移動到了public中，這是其區別之一，另外Vue-cli2建立的專案其配置檔案存放在build和config資料夾中，而Vue-cli4建立的專案沒有這兩個資料夾，那是不是真的沒有了配置檔案呢？當然不是，你想想如果沒有配置檔案了，那專案如何能夠執行呢，其實只是將配置檔案隱藏了而已。

那要如何檢視配置檔案呢？

配置檔案隱藏在node_modules/@vue/cli-service中，開啟這個資料夾，你就可以看到webpack.config.js配置檔案了，但是並不推薦你在這裡面進行webpack的相關配置，通常我們的做法是在專案的根目錄下建立一個vue.config.js的配置檔案，在這個檔案中進行webpack的配置，因為在執行專案時，會先看是否有這個檔案，如果有的話會將這個檔案與隱藏的配置檔案合併。

下面以配置資料夾別名和配置本地服務為例：

1.配置資料夾別名

為什麼要給資料夾配置別名呢？有沒有這個疑惑？首先當然是為了方便，因為在引用某個檔案時需要給出其路徑，但如果路徑過長，就可能會出錯了，而且還不優雅美觀。直接貼程式碼：

 1 module.exports = {
 2   configureWebpack: {
 3     // resolve是配置與路徑相關的
 4     resolve: {
 5       extensions: ['.js', '.vue', '.json'],  // 省略檔案字尾名
 6       // 配置別名
 7       alias: {
 8         'assets': '@/assets',
 9         'common': '@/common',
10         'components': '@/components',
11         'network': '@/network',
 
12         'views': '@/views',
13       }
14     }
15   }
16 }

是不是有點疑惑@是個什麼東西呢？@是代表的是src目錄的別名，在隱藏的配置檔案中有這個配置。

2.配置本地服務

 1 module.exports = {
 2   configureWebpack: {
 3     // 配置本地伺服器
 4     devServer: {
 5       compress: true,  // 啟用壓縮，程式碼佔用的空間少，在網際網路傳輸快
 6       port: 8080,  // 設定開啟的埠
 7       host: '127.0.0.1',  // host
 8       hot: true,  // 熱啟動
 9       open: true,  // 瀏覽器自動開啟
10       // 伺服器代理，實現跨域訪問介面
11       proxy: {
12         '/api': {
13           target: '要訪問目標的地址', //介面地址
14           ws: true, //是否開啟websockets
15           changOrigin: true, //允許跨域  
16           pathRewrite: {
17             '^/api': '' //路徑重寫
18           }
19         }
20       }
21     },
22   }
23 }

注意：在配置vue.config.js後需要重新編譯，才會生效,否則就不會起作用喲。