打包工具:webpack
一、根据element-plus官网给的方法配置自动导入
1、首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件
npm install -D unplugin-vue-components unplugin-auto-import
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,
}),
],
},
});
在 js 中 import 相对路径代码的时候经常出现路径层级较深的情况,引入起来比较麻烦(虽然 webstorm 支持提示简化了不少),所以在 webpack 中可以做如下配置:
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
}
},
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 为 空,就是去掉它
}
}
}