vue.config.js pathRewrite作用
时间: 2023-10-28 14:29:49 浏览: 56
Vue.js的vue.config.js文件中的pathRewrite选项是用来重写路径的。它可以用来修改webpack-dev-server服务器提供的虚拟路径映射规则。通过设置该选项,我们可以将客户端请求的URL路径重写为另一个路径,从而达到伪造静态文件路径的效果。这在前端开发中非常有用,因为我们经常需要在开发阶段将本地的资源(如图片、字体文件)等映射到合适的请求路径上。
相关问题
vue.config.js配置 pathRewrite
在vue.config.js中配置pathRewrite的作用是重写请求的URL路径。通过配置pathRewrite,可以将请求的URL路径中的某部分替换为其他内容。这样可以隐藏真实的请求地址,提高安全性。在引用\[2\]中的示例中,配置了一个代理,将请求路径中的'/api/FingerUnion/list.php'替换为空字符串,即去掉了这部分路径。这样在使用axios调用接口时,只需要使用'/api/FingerUnion/list.php'作为请求路径,实际上会被代理转发到'http://iwenwiki.com'这个地址。这样就实现了隐藏真实请求地址的效果。
#### 引用[.reference_title]
- *1* *3* [vue.config.js配置](https://blog.csdn.net/Hunter_Kevin/article/details/124222798)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v4^insert_chatgpt"}} ] [.reference_item]
- *2* [vue.config.js跨域配置](https://blog.csdn.net/silbier/article/details/129724999)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v4^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
vue 生成vue.config.js文件
Vue框架生成vue.config.js文件的方法如下:
1. 首先,确保你已经安装了Vue CLI。如果没有安装,可以通过以下命令进行安装:
```
npm install -g @vue/cli
```
2. 在终端中进入你的Vue项目的根目录。
3. 接下来,运行以下命令生成vue.config.js文件:
```
vue inspect > vue.config.js
```
这个命令会根据项目的配置生成vue.config.js文件。这个文件将包含当前项目的默认配置。
4. 现在,你可以在生成的vue.config.js文件中进行任何需要的修改和配置。你可以根据自己的需求添加webpack配置、修改打包路径、配置代理等等。
注意:在修改vue.config.js文件之前,确保你已经详细了解了Vue CLI和webpack的相关配置项和用法,以免出现错误配置导致项目无法正常运行。
```
// 示例:修改打包路径
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/my-project/'
: '/'
}
```
```
// 示例:配置代理
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
```
以上是生成vue.config.js文件的步骤和示例配置,你可以根据自己的需求进行修改和扩展。