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

2024年1月25日 58次阅读 来源: smile

一：配置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,
    原文作者：smile
    原文地址: https://segmentfault.com/a/1190000013648542
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞