Vue项目中的某些webpack配置

发表于 | 分类于
字数统计: 546 字 | 阅读时长 ≈ 2 分钟

常会用到的一些修改的地方，例如打包忽略console.log,以及为了大小去掉map文件等；

webpack配置开发与打包后请求接口

  • 本地开发时和部署项目时我们的请求接口是不一样的，除了定义一个常量手动修改，webpack可以配置吗，可以的！

    ​

1.修改开发环境以及正式环境的配置

  • config文件夹下有两个文件

  • dev.env.js ：这里可以配置开发环境的接口

    1
    2
    3
    4
    5
    6
    module.export = merge(prodEnv, {
        NODE_ENV: '"development"',
        // 加上下面这句 
        HOST_API: '"http://localhost:8080"'
        // 这里写你自己定义的属性 后面是本地开发时请求的接口
    })

    ​

  • prod.env.js

    1
    2
    // 也是加上
    HOST_API: "'http://localhost:8888"'

    ​

  • 最后 axios.defaults.baseURL = HOST_API 就可以了

2.通过 process.env.NODE_ENV来写判断

1
2
3
process.env.NODE_ENV === "development" // 开发环境
process.env.NODE_ENV === "production" //配置环境
// development production 与 config/dev.env.js 和 config/prod.env.js 是对应的

webpack打包去掉console.log以及map文件

  • 去掉conosle.log以及debuger

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 在build/webpack.prod.conf.js里 
    new webpack.optimize.UglifyJsPlugin({
          compress: {
            warnings: false,
            drop_debugger: true, /
            drop_console: true
          },
          sourceMap: true
        }),

  • 去掉打包后的map文件 

    1
    2
    3
    4
    5
    // 在config/index.js文件里
    build{
         productionSourceMap: false
    }
    // 但其实线上map文件可以定位错误 如果需要定位问题可以设为true

    ​

webpack中添加引入文件的别名

  • build/webpack.base.conf.js里

    1
    2
    3
    4
    5
    6
    7
    8
    9
     resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          'vue$': 'vue/dist/vue.esm.js',
          '@': resolve('src'),
          'common': resolve('src/common')    
        }
      }
    // 这样import from时 common可以代替src/common ,@可以代替src

配置本地开发转发代理

  • config/index.js中的dev队形中
1
2
3
4
5
6
7
8
9
10
11
12
13
dev: {
    proxyTable: {
        '/api': {
            target: 'http://www.baidu.com',
            changeOrigin: true,
                pathRewrite: {
                  '^/api'
                }
        }
    }
}
// 当请求的url为api时 会转发到target
// 最终实际发出的请求时target

局域网内通过ip访问本地vue-cli搭建的项目

  • 在config/index.js中奖默认的host:localhost修改为‘0.0.0.0’

  • 在package.json中是script下的dev的值，后面加上 –host 0.0.0.0

    这样通过localhost和ip都可以访问到，直接修改为ip的方式localhost是访问不到的

------ 本文结束------
0%