vue config js 的pathRewrite
时间: 2024-09-14 21:14:44 浏览: 22
Vue.config.js中的`pathRewrite`属性通常用于解决在静态文件(如CSS、JS等)路径映射时的问题。当你的项目使用了如Webpack这样的构建工具,并且配置了别名(alias),可能会遇到相对路径解析到实际资源位置的问题。通过设置`pathRewrite`,你可以指定一个源路径(source path)和目标路径(target path)的映射规则,使得在运行时访问这些别名指向的文件能正确解析。
例如:
```javascript
module.exports = {
configureWebpack: {
output: {
filename: '[name].js',
chunkFilename: '[id].chunk.js'
},
devServer: {
historyApiFallback: true,
// 这里就是pathRewrite的配置
pathRewrite: {
'^/~': '/' // 将所有的~替换为根目录(假设你的资源文件放在src下面)
}
}
}
}
```
在这个例子中,`^/~`表示匹配所有以`~`开始的路径,会被替换为`/`,即相对于项目的根目录。这样,当你在HTML模板中引用`~/assets/css/main.css`时,实际上会被代理到`/src/assets/css/main.css`。