1.main.js
import {createApp} from 'vue'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import 'element-plus/dist/index.css'
// import 'ol-ext/dist/ol-ext.min.css';
// import 'default-passive-events'
import {createPinia} from 'pinia'
import { createPersistedState } from 'pinia-persistedstate-plugin'
// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// rem自适应
import 'amfe-flexible'
import App from './App.vue'
import router from './router'
import '@/assets/css/reast.css'
import '@/assets/base.css'
const app = createApp(App)
// 全局注册
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
const pinia = createPinia()
const persist = createPersistedState()
pinia.use(persist)
app.use(pinia)
// app.use(ElementPlus)
app.use(router)
app.use(ElementPlus, {
locale: zhCn,
})
app.mount('#app')
2.package.json
{
"name": "xxm",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite --open",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.4.21",
"vue-router": "^4.2.5",
"path": "^0.12.7",
"pinia": "^2.1.7",
"pinia-persistedstate-plugin": "^0.1.0",
"less": "^4.2.0",
"less-loader": "^11.1.3",
"element-plus": "^2.4.1",
"axios": "^1.6.1",
"@element-plus/icons-vue": "^2.1.0",
"amfe-flexible": "^2.2.1",
"postcss-pxtorem": "^6.0.0",
"echarts": "^5.4.3"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.4",
"vite": "^5.2.0"
}
}
3.vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
import postCssPxToRem from "postcss-pxtorem";
// https://vitejs.dev/config/
export default defineConfig({
base: "./",
plugins: [vue()],
build: {
outDir: "dist",
assetsDir: "assets", // 指定静态资源存放路径
sourcemap: false, // 是否构建source map 文件
},
resolve: {
alias: {
"@": path.resolve(__dirname, "src"),
src: path.resolve(__dirname, "src"),
"@assets": path.resolve(__dirname, "src/assets"),
"@components": path.resolve(__dirname, "src/components"),
"@image": path.resolve(__dirname, "src/assets/image"),
"@views": path.resolve(__dirname, "src/views"),
"@stores": path.resolve(__dirname, "src/stores"),
},
},
css: {
postcss: {
plugins: [
postCssPxToRem({
// 自适应，px>rem转换
rootValue: 192,
propList: ["*"], // 需要转换的属性，这里选择全部都进行转换
selectorBlackList: ['norem'], // 过滤掉norem-开头的class，不进行rem转换，这个内容可以不写
}),
],
},
},
server: {
host: "0.0.0.0",
port: 8080,
},
// devServe: {
// proxy: {
// '/api': {
// target: 'http://192.168.100.145:80',
// changeOrigin: true,
// pathRewrite: {'^/api': 'save'},
// }
// }
// }
});
