在vue項目中配置webpack

首先我們來看一下使用Vue-cli2與Vue-cli2之后的版本(這里以Vue-cli4版本為例)創建項目目錄結構的不同：

Vue-cli2（左圖）與Vue-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.配置文件夾別名

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

module.exports = {
  configureWebpack: {
    // resolve是配置與路徑相關的
    resolve: {
      extensions: ['.js', '.vue', '.json'],  // 省略文件后綴名
      // 配置別名
      alias: {
        'assets': '@/assets',
        'common': '@/common',
        'components': '@/components',
        'network': '@/network',
        'views': '@/views',
      }
    }
  }
}

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

2.配置本地服務

module.exports = {
  configureWebpack: {
    // 配置本地服務器
    devServer: {
      compress: true,  // 啟用壓縮，代碼占用的空間少，在互聯網傳輸快
      port: 8080,  // 設置打開的端口
      host: '127.0.0.1',  // host
      hot: true,  // 熱啟動
      open: true,  // 瀏覽器自動打開
      // 服務器代理，實現跨域訪問接口
      proxy: {
        '/api': {
          target: '要訪問目標的地址', //接口地址
          ws: true, //是否開啟websockets
          changOrigin: true, //允許跨域  
          pathRewrite: {
            '^/api': '' //路徑重寫
          }
        }
      }
    },
  }
}

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