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

一：配置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,