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,
阅读 3k

推荐阅读