vue框架的跨域--vue.config.js

vue框架的跨域--vue.config.js

  • vue框架的跨域

    node + vue + webpack + webpack-dev-server搭建的项目,跨域请求接口,
    直接修改webpack.config.js(vue.config.js)配置。
    开发环境下,vue渲染服务和接口代理服务都是webpack-dev-server同一个,所以页面与代理接口之间不再跨域。

    vue.config.js配置如下:【其他方式配置参考

    const { defineConfig } = require('@vue/cli-service')
    module.exports = defineConfig({
      transpileDependencies: true,
      devServer: {
        open: true,       // 服务启动,自动打开浏览器
        port: 1024,
        proxy: {
          'api': {
            target: 'http://127.0.0.1:8088/',
            changeOrigin: true
          }
        }
      },
      configureWebpack: {
        resolve: {
          alias: {
            '@': 'src'
          }
        }
      }
    })
    

关注公众号:有点建树-AI,做更多交流。
在这里插入图片描述

### Vue 3 中使用 Element Plus 并自定义样式 在 Vue 3 项目中集成 Element Plus 组件库并配置 Vite 构建工具来支持按需加载和自定义样式的设置如下: #### 安装依赖包 首先安装必要的 npm 包,包括 `element-plus` 和用于按需加载的插件。 ```bash npm install element-plus unplugin-vue-components unplugin-auto-import -D ``` #### 修改 `vite.config.js` 编辑项目的根目录下的 `vite.config.js` 文件,在其中加入针对 Element Plus 的特定配置项以便于实现按需导入以及主题定制功能。具体来说就是在 `plugins` 数组里添加两个新的条目——一个是用来处理组件自动注册与样式注入;另一个则是负责调整 API 请求路径前缀的问题[^1]。 ```javascript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' export default defineConfig({ plugins: [ vue(), // 自动导入API函数 AutoImport({ imports: ['vue', 'vue-router'], dts: 'src/auto-imports.d.ts', }), // 按需加载Element Plus组件及其CSS资源 Components({ resolvers: [ { type: 'component', resolve: (name) => ({ name, from: 'element-plus' }) } ] }), // 处理/api请求代理转发至指定服务器地址 ...server.proxy('/api', { target: 'http://your-backend-server-url/', changeOrigin: true, rewrite: p => p.replace(new RegExp(`^${p}`), '') }) ], css: { preprocessorOptions: { scss: { additionalData: ` @use "sass:map"; @import "@/assets/styles/variables.scss"; @import "element-plus/theme-chalk/src/index"; :root { ${Object.keys(map).reduce((accu, key) => accu += `${key}: #{map.get("${key}")};\n`, '')} } `, }, }, }, }) ``` 这段代码实现了几个重要目标: - 使用 `AutoImport` 插件简化常用方法的调用; - 利用 `Components` 插件完成对 Element Plus 组件的懒加载优化; - 设置了一个简单的 HTTP 代理规则以方便开发环境中的访问测试; - 对 SCSS 进行预处理器选项扩展,允许覆盖默认的主题颜色变量,并通过 Sass Map 动态生成 CSS 变量供全局应用[^2]。 请注意以上示例假设存在名为 `@/assets/styles/variables.scss` 的文件保存着想要替换掉原生 Chalk 主题的颜色值或其他样式参数。如果要完全替换成自己的设计风格,则可能还需要进一步修改该文件的内容或是创建全新的主题方案[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值