vue-cli中一些webpack的配置總結

smile發表於2018-03-10
VueWeb

一：配置npm run dev時直接開啟瀏覽器

  1. 在bulid的目錄下直接找到webpack.dev.conf.js
  2. 搜尋devServer，找到open: config.dev.autoOpenBrowser,你會發現依賴於config的資料夾，
  3. 進去config資料夾找到index.js
  4. 搜尋autoOpenBrowser這個關鍵字，把後面的值改為true。

二：修改埠號的兩種方法

  1. 和上面一樣，在config的index的檔案裡面搜尋port直接修改；
  2. 在命令列啟動的時候修改: PORT=4000 npm run dev

三：打包時候加上–report來分析程式碼

npm run build –report

四：配置代理

  1. 在config的目錄下面找到dev（開發環境裡）的proxyTable
  2. 配置代理
proxyTable: {
  `/api/**`: {
    target: `http://www.xxx.com`, // 你介面的域名
    secure: false,      // 如果是https介面，需要配置這個引數
    changeOrigin: true,     // 如果介面跨域，需要進行這個引數配置
  }
}

五：使用less預編譯語言

1：安裝less的loader：npm install less less-loader –save-dev

六：配置元件裡面的路徑

1: 在webpack.base.conf.js搜尋resolve，在alias物件裡面配置。

resolve: {
    extensions: [`.js`, `.vue`, `.json`],
    alias: {
        `@`: resolve(`src`),
        `common`: resolve(`src/common`),
        `components`:  resolve(`src/components`),
        `base`: resolve(`src/base`),
        `api`: resolve(`src/api`)
    }
}

2: 在組建裡面使用就不用使用相對路徑一直向上找了

// 元件裡面使用例子
import Scroll from `base/scroll/scroll`;
import {prefixStyle} from `common/js/dom`；
import {getRecommend, getDiscList} from `api/recommend`

七：處理打包上線後生成的js和css檔案載入404

在根目錄的config檔案下面找的index.js檔案，修改bulid下面的配置assetsPublicPath，在/前面加一個.

assetsPublicPath: `./`,

八：去掉打包後生成的map檔案

在根目錄的config檔案下面找的index.js檔案，修改bulid下面的配置productionSourceMap為false

productionSourceMap: false,

相關文章