vue常用配置中文件目录配置别名以及跨域代理配置,常用“@/“表示“src“文件目录,后台没设置跨域可设置代理

舞空~

于 2020-11-03 11:24:39 发布

阅读量301

点赞数 1

分类专栏： vue vscode设置 js 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_44011751/article/details/109465708

版权

vue 同时被 3 个专栏收录

27 篇文章

订阅专栏

22 篇文章

订阅专栏

vscode设置

2 篇文章

订阅专栏

本文介绍如何在Vue项目中配置文件目录别名，简化路径引用，并通过Webpack配置解决前端跨域问题，提升开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.文件目录配置别名
我们可以把src配置为@，如果需要就不用到根目录开始写了，直接用@/xxx/进行引用。根据自己需要进行配置，在vue.config.js文件中加入代码

 // 配置
  chainWebpack: (config)=>{
    // 配置别名
    config.resolve.alias
        .set('@', resolve('src'))
        .set('assets',resolve('src/assets'))
        .set('components',resolve('src/components'))
        .set('router',resolve('src/router'))
        .set('utils',resolve('src/utils'))
        .set('static',resolve('src/static'))
        .set('store',resolve('src/store'))
        .set('views',resolve('src/views'))
        }

2.跨域配置
在前端请求过程中，如果后台没有设置跨域请求的，可以在webpack进行配置,在vue.config.js文件中加入代码。

devServer: {
    host: '0.0.0.0',
    port: 8000,
    https: false,
    hotOnly: false,
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8080',
        changeOrigin: true
      }
    }