vite.config.js-element-plus

打包工具：webpack

一、根据element-plus官网给的方法配置自动导入
1、首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import
1

const { defineConfig } = require("@vue/cli-service");
const AutoImport = require("unplugin-auto-import/webpack");
const Components = require("unplugin-vue-components/webpack");
const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");
const ElementPlus = require("unplugin-element-plus/webpack");
 
module.exports = defineConfig({
  css: {
    loaderOptions: {
      scss: {
        //自定义的主题文件
        additionalData: `@use "@/css/variables.scss" as *;`,
      },
    },
  },
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver({ importStyle: "sass" })], //importStyle配置样式引入方式，自动引入修改主题色设置此属性
      }),
      Components({
        resolvers: [ElementPlusResolver({ importStyle: "sass" })], //importStyle配置样式引入方式，自动引入修改主题色设置此属性
      }),
      ElementPlus({
        useSource: true,
      }),
    ],
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

在 js 中 import 相对路径代码的时候经常出现路径层级较深的情况，引入起来比较麻烦（虽然 webstorm 支持提示简化了不少），所以在 webpack 中可以做如下配置：

 resolve: {
            alias: {
                '@': path.resolve(__dirname, './src'),
            }
        },
1
2
3
4
5

import Home from ‘@/pages/Home’;

配置proxy代理接口：解决跨域

在vite.config.js中配置
把遇到带/api路径的请求，都映射到target属性 然后重写api为空 为了去掉他

server: {
  proxy: {
    '/api': {
      target: 'http://backend-api-02.newbee.ltd/manage-api/v1', // 凡是遇到 /api 路径的请求，都映射到 target 属性
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '') // 重写 api 为 空，就是去掉它
    }
  }
}
1
2
3
4
5
6
7
8
9