vue3中配置文件vue.config.js不生效的解决办法

 更新时间:2024年05月16日 10:16:37   作者:qq_26264187  
这篇文章主要介绍了vue3中配置文件vue.config.js不生效的解决办法,文中通过代码示例讲解的非常详细,对大家解决问题有一定的帮助,需要的朋友可以参考下

刚学完配置vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      '/api': {
        target: 'http://192.168.1.228:8080', //后端的地址
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      },
 
    }
  }
})

发现访问http://localhost:5173/api/login/user访问结果404

经检查package.json文件

 "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }

发现Vue 3 在使用 Vite 作为构建工具,所以跨域配置应在 vite.config.js 文件中进行

import { fileURLToPath, URL } from 'node:url'
 
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },server:{
  proxy:{
    '/api':{
      target:'http://192.168.1.228:8080',
      changeOrigin:true,
      rewrite:path=>path.replace(/^\/api/,'')
    }
  }
  }
 
})

配置完成重启,访问成功

以上就是vue3中配置文件vue.config.js不生效的解决办法的详细内容,更多关于vue3 vue.config.js不生效的资料请关注脚本之家其它相关文章!

相关文章

  • Vue打包后不同版本详细解析

    Vue打包后不同版本详细解析

    vue项目打包是我们日常经常遇到的,下面这篇文章主要给大家介绍了关于Vue打包后不同版本详细解析的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • vue-cli3.x配置全局的scss的时候报错问题及解决

    vue-cli3.x配置全局的scss的时候报错问题及解决

    这篇文章主要介绍了vue-cli3.x配置全局的scss的时候报错问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue中使用geobuf的示例详解

    vue中使用geobuf的示例详解

    这篇文章主要介绍了vue中使用geobuf的示例详细,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-04-04
  • vue实现前端列表多条件筛选

    vue实现前端列表多条件筛选

    这篇文章主要为大家详细介绍了vue实现前端列表多条件筛选,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • Vue.JS入门教程之事件监听

    Vue.JS入门教程之事件监听

    这篇文章主要为大家详细介绍了Vue.JS入门教程之事件监听,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 浅谈Vue的基本应用

    浅谈Vue的基本应用

    本文主要介绍了Vue的基本应用。具有一定的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • Vue启动失败报错:Module not found: Error: Can‘t resolve 'less-loader'解决

    Vue启动失败报错:Module not found: Error: Can‘t resolve &apos

    这篇文章主要给大家介绍了关于Vue启动失败报错:Module not found: Error: Can‘t resolve 'less-loader'解决的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • vue3子组件数据无法更新问题

    vue3子组件数据无法更新问题

    这篇文章主要介绍了vue3子组件数据无法更新问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue3项目如何国际化实战指南

    vue3项目如何国际化实战指南

    像很多大型的网址,特别是跨国际等公司网页,访问来自世界各地用户,所以网页的国际化极其重要的需求,下面这篇文章主要给大家介绍了关于vue3项目如何国际化的相关资料,需要的朋友可以参考下
    2022-09-09
  • vue如何使用formData传递文件类型的数据

    vue如何使用formData传递文件类型的数据

    这篇文章主要介绍了vue如何使用formData传递文件类型的数据问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05

最新评论