vue文件路径相对地址简写为@ 省略../ webpack configureWebpack 用法

在项目中通常我们看到文件地址简写为@/view @/store ，如果你的地址还是一长串的…/…/…/…/相对地址的话，那么下面的代码希望能够帮助到你。

第一步

找到你的vue webpack配置文件入口，可能是你自定义的config.js ，也可能是vue.config.js，找到下面这些熟悉的配置；

module.exports = {
  SERVER: [
    {API_SERVER: "https://*******.net"}, //测试,
  ],
  //本地webpack开发服务器端口
  DEV_SERVER_PORT: 8081,
  //本地build文件测试服务器端口
  PLAY_SERVER_PORT: 9000,
  ENABLE_API_LOG: false,
  configureWebpack: {},//这里可以配置地址简写
  //... 此处省略更多配置
}

第二步 完整配置代码，引入path插件（无需安装）；

const path = require('path');
function resolve(dir) {
	return path.join(__dirname, dir)
}
module.exports = {  
  //本地webpack开发服务器端口
  DEV_SERVER_PORT: 8081,
  //本地build文件测试服务器端口
  PLAY_SERVER_PORT: 9000,
  ENABLE_API_LOG: false,
  //这里可以配置地址简写
  configureWebpack: {
  resolve: {
		alias: {
				'@': resolve('src')
			}
		}
  },
  //... 此处省略更多配置
}