vue @vue/cli3 配置路径别名

问题描述

1. 工作中，想在Vue 工程中启动webpack打包的时候，传一个配置参数给浏览器
2. 这样浏览器环境根据 配置的参数 就可以区分环境，例如： 数据是从“mock环境”还是“生产环境”中获取数据
3. 同事给我的建议是了解 webpack 是如何把jquery 引入到全局的，那么这个方法就类似
4. jquery 的配置信息是房子 node_module 中，我不可能将自己的配置文件发布到 npm 服务器中，这样太麻烦
5. 因此，就定义一个路径别名，webpack 能够根据自定义路径找到配置文件

vue.config.js 如何配置路径别名

// vue.config.js
const webpack = require("webpack");
const merge = require("webpack-merge");
let path = require('path')

const cfg = {
  username: '"huanghaili"' // 字符串要用 "''" (双引号和单引号 包裹起来)
};

module.exports = {
  lintOnSave: false, //是否开启eslint
  // 自定义 webpack  配置
  chainWebpack: config => {
    console.log(config);
    // 修改 webpack.DefinePlugin 配置
    config.plugin("define").tap(args => {
      console.log(args[0]);
      // 把动态配置合并到process.env
      let name = "process.env";
      // 使用 merge 合并，保证原始值不变
      args[0][name] = merge(args[0][name], cfg);
      console.log(args[0]);
      return args;
    });

    // 自定义路径
    config.resolve.alias
      .set('myconfig', path.join(__dirname, './myconfig/config.js')) // key,value自行定义，比如.set('@@', resolve('src/components'))
      .set('@config', path.join(__dirname, './myconfig')) // key,value自行定义，比如.set('@@', resolve('src/components'))
  },
  configureWebpack: {
    // webpack.DefinePlugin
    //支持jquery
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "windows.jQuery": "jquery",
        // 这里要写 window.myconfig ，否则在浏览器的全局中，无法直接访问到myconfig
        "window.myconfig":"myconfig"
      })
    ]
  }
  publicPath: "./"
};

备注：

1. 修改路径的配置是在 chainWebpack 节点下面，使用 config.resolve.alias 配置节点
2. 别名可以代表 文件 和 路径
3. 上面案例，演示了 chainWebpack 下修改多个配置信息的使用场景

使用自定义的新路径别名

1. main.js 根据别名引入配置文件

import Vue from 'vue'
import App from './App.vue'
import cfg from '@config/config.js'
import myconfig from 'myconfig'
// cfg 和 myconfig 是同一個文件内容
console.log(cfg)
console.log(myconfig)
new Vue({
  render: h => h(App),
}).$mount('#app')

2. 定义配置文件 工程根目录/myconfig/config.js

export default {
    name: 'huangbiao',
    age: '18'
}