2020-06-18vue-cli项目之webpack打包(co

vue -- config index.js 配置文件详解

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

//此配置文件是用来定义  ` 开发环境 `  和  ` 生产环境 `  中所需要的参数

//path是node.js的路径模块，用来处理路径统一的问题
const path = require('path')

module.exports = {
  //开发环境
  dev: {
    assetsSubDirectory: 'static', //编译输入的二级目录
    assetsPublicPath: '/', //编译发布的根目录，可配置为资源服务器域名或CDN域名
    proxyTable: { //vue-cli使用这个功能是借助http-proxy-middleware插件，一键解决跨域请求api
      '/api': {
        target: 'http://api.xxxxx.com',//目标url地址
        changeOrigin: true, //指示是否跨域
        secure: false
      },
      '/wxApi': {
        target: 'http://wechat.xxxxx.com',
        changeOrigin: true,
        secure: false,
        pathRewrite: {
          '^/wxApi': '/api'//等价于wechat.xxxxx.com/api
        }
      },
    },
    host: 'localhost', // 运行测试页面的域名ip
    port: 8080, // 运行测试页面的端口
    autoOpenBrowser: false,//项目运行时是否自动打开浏览器
    errorOverlay: true,//浏览器错误提示
    notifyOnErrors: true,//跨平台错误提示
    poll: false, // 使用文件系统获取文件改动的通知devServer.watchOptions
    useEslint: true,
    showEslintErrorsInOverlay: false,
    devtool: 'cheap-module-eval-source-map',//
    cacheBusting: true,//使缓存失效
    cssSourceMap: true //代码压缩后bug定位将会非常困难，引入SourceMap记录压缩前后的位置信息记录，
                       //当产生错误时直接定位到压缩前的位置。
  },

  ` 生产环境 `
  build: {
    index: path.resolve(__dirname, '../dist/index.html'), //编译输入的index.html文件
    assetsRoot: path.resolve(__dirname, '../dist'),//编译输出的静态资源路径（项目打包时的文件）
    assetsSubDirectory: 'static',//编译输出的二级目录
    assetsPublicPath: '/static/client/',//编译发布的根目录，可配置为资源服务器域名或CDN域名
    productionSourceMap: false,//是否开启cssSourceMap
    devtool: '#source-map',//增加调试，该属性为原始源代码
    productionGzip: false,//是否开启gzip
    productionGzipExtensions: ['js', 'css'],//需要使用gzip压缩的文件的扩展名
    bundleAnalyzerReport: process.env.npm_config_report //打包分析
  }
}

vue -- config prod.env.js 配置文件详解

'use strict'
module.exports = {
  //作用很明显，就是导出一个对象，NODE_ENV是一个环境变量，指定production环境
  NODE_ENV: '"production"',
  BASE_API: '"http://yy.xxxxx.com"'
}

vue -- config dev.env.js 配置文件详解

'use strict'
//引入webpack的merge插件，改插件用来合并对象，也就是配置文件用的，相同的选项会被覆盖
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')//引入prod.env.js配置文件

module.exports = merge(prodEnv, { //将两个配置对象合并
  NODE_ENV: '"development"',
  BASE_API: '"http://localhost:8080"'
})