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

末蓝、 2024-04-19 11:58 63阅读 0赞

# 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,