前端笔记

• 1. vue.config 部分配置说明
• 2. 根据环境不同使用不同的配置，如接口地址

1. vue.config 部分配置说明

const { merge } = require('webpack-merge')
module.exports = {
  outputDir: 'dist',//打包的文件夹名
  publicPath: process.env.NODE_ENV === 'production' ? '' : '/',//静态资源路径
  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  productionSourceMap: false,
  lintOnSave: false,
  // 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
  // 如果这个值是一个函数，则会接收被解析的配置作为参数。该函数及可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。
  configureWebpack: {
    module: {
      unknownContextCritical: false
    },
    // 外部扩展
    externals: {
      BMap: 'BMap',
      BMapLib: 'BMapLib',
      locationAPI: 'locationAPI',
    },
    // 代理
    devServer: {
      proxy: {
        '/ctaWebApi': {
          target: 'https://www.ctexcel.us/usctexcelxff/ctaWebApi/',
          changeOrigin: true,
          pathRewrite: {
            '^/ctaWebApi': ''
          }
        },
        '/activeApi': {
          // target: 'https://www.ctexcel.us/usctexcelxff/talos/',
          target: 'https://www.ctexcel.us/usctexcelxff/talos/',
          changeOrigin: true,
          pathRewrite: {
            '^/activeApi': ''
          }
        },
      }
    },
    resolve: {
      alias: {
        vue$: 'vue/dist/vue.esm.js'
      }
    },
    performance: {
      hints: false //去掉该死的警告！！！！！
    }
  },
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => {
        return merge(options, {
          esModule: false
        })
      })
  }
}

2. 根据环境不同使用不同的配置，如接口地址

• 修改 package.json 中的命令。 在不同环境时加上 --mode xxx，可以使当前环境 env 改变。默认 serve 为 development，build 为 production

"scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "build_test": "vue-cli-service --mode test build",
    "lint": "vue-cli-service lint"
  },

• 在项目中使用 process.env.NODE_ENV 获取当前环境
• 添加配置文件

  let API_CONFIG = {
    development: {
      LocationAPI: 'https://www.ctexcel.us/usctexcelxff/talos'
    },
    test: {
      LocationAPI: 'https://www.ctexcel.us/usctexcelxff/talos'
    },
    production: {
      LocationAPI: 'https://www.ctexcel.us/helios'
    }
  }
  export default API_CONFIG[process.env.NODE_ENV]
  

• 使用时

  import { LocationAPI } from '@/productConfig.js'