vue-cli中一些webpack的配置总结

一、配置npm run dev时直接打开浏览器

• 在bulid的目录下直接找到webpack.dev.conf.js
• 搜索devServer，找到open: config.dev.autoOpenBrowser,你会发现依赖于config的文件夹，
• 进去config文件夹找到index.js
• 搜索autoOpenBrowser这个关键字，把后面的值改为true。

二、修改端口号的两种方法

• 和上面一样，在config的index的文件里面搜索port直接修改；
• 在命令行启动的时候修改: PORT=4000 npm run dev

三、打包时候加上–report来分析代码

• npm run build –report

四、配置代理

• 在config的目录下面找到dev（开发环境里）的proxyTable
• 配置代理

proxyTable: {
  '/api/**': {
    target: 'http://www.xxx.com', // 你接口的域名
    secure: false,      // 如果是https接口，需要配置这个参数
    changeOrigin: true,     // 如果接口跨域，需要进行这个参数配置
  }
}

五、使用less预编译语言

• 安装less的loader：npm install less less-loader –save-dev

六、配置组件里面的路径

• 在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')
    }
}

• 在组建里面使用就不用使用相对路径一直向上找了

// 组件里面使用例子
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,