vue.config.js添加路径别名

时间:2023-03-09 15:06:43
vue.config.js添加路径别名

  在组件库中添加配置文件后其它文件需要引用它,此时想到利用路径的别名比较方便,相当于缩写了,请看下面的添加过程:

  (一)在vue.config.js文件中添加的内容如粗体字体所示:

const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin') function resolve (dir) {
return path.join(__dirname, '.', dir) // 这里采用一个点,因为vue.config.js文件和package.json文件都在同一个目录下,即根目录下
} module.exports = {
// 将构建好的文件输出到哪里
outputDir: './dist',
configureWebpack: {
resolve: {
alias: {
'@@': resolve('static') // 这里采用两个@符号来代替路径的别名,因为一个@符号已经默认被设置src的路径了,为了不影响原有的功能,这里采用两个@字符
}
},
plugins: [
// 需要用到拷贝文件的插件
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, './static'),
to: '.',
ignore: ['.*']
}
])
]
}
}

  编译正常。

  (二)编译过程中若出现“These dependencies were not found:”之类的问题,那就是路径不正确,需要检查一下代码目录结构。