vue-cli3搭建的vue项目中没有build目录,相关的webpack配置也都隐藏了,官方文档中说需要在vue.config.js中配置
1.在根目录下创建vue.config.js(该文件名不能随意修改)
2.在文件中输入以下代码
const path = require("path");
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
chainWebpack: (config) => {
config.resolve.alias
.set("@", resolve("./src"))
.set("assets", resolve("./src/assets"))
//可以根据上面的格式自行配置
},
};
3.注意事项及用法
- vue.config.js修改之后需重启项目才能生效
- 在html及css中使用别名时前面需要加~ 示例如下:
<img src="~assets/img/tabBarIco/index.png"> <style> @import '~assets/css/base.css' </style>