test-button-orb
v0.0.4
Published
测试npm库
Maintainers
snowemperorReadme
#test-button-orb
npm i element-plus
npm i unplugin-vue-components
npm i unplugin-auto-import
npm i vite-plugin-externals
npm i vite-plugin-html-config
vite.config.js 中配置如下：
import {
defineConfig,
loadEnv
} from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
import Components from "unplugin-vue-components/vite";
import AutoImport from "unplugin-auto-import/vite";
import {
ElementPlusResolver
} from "unplugin-vue-components/resolvers";
import htmlConfig from "vite-plugin-html-config"; //告诉 Vite 打包后的产物哪些 dependencies 需要在页面入口 html 文件中随 public 目录（或 CDN）引入
import {
viteExternalsPlugin
} from "vite-plugin-externals"; //告诉 vite 什么 dependencies 不参与打包
// https://vitejs.dev/config/
import {
fileURLToPath
} from "url";
const filename = fileURLToPath(
import.meta.url);
const \_dirname = path.dirname(filename);
// import requireTransform from 'vite-plugin-require-transform';
export default ({
mode
}) => {
// console.log(loadEnv(mode, process.cwd()).VITE_APP_BASE_API, "api");
return defineConfig({
// 插件配置
plugins: [
vue(),
// requireTransform({
// fileRegex: /.js$|.vue$/
// }),
AutoImport({
resolvers: [
ElementPlusResolver({
importStyle: mode == 'development' ? false : true,
}),
],
}),
Components({
resolvers: [
ElementPlusResolver({
importStyle: mode == 'development' ? false : true,
}),
],
}),
viteExternalsPlugin({
cesium: "Cesium",
}),
htmlConfig({
headScripts: [{
src: "/lib/cesium/Cesium.js",
},
{
src: "src/utils/cesium-sensor-volumes.js",
},
],
links: [{
rel: "stylesheet",
href: "/lib/cesium/Widgets/widgets.css",
}, ],
}),
],
base: "./",
publicDir: "public",
productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
//设置的别名
resolve: {
// 如果报错__dirname找不到，需要安装node,
// 执行npm i @types/node --save-dev
alias: {
"@": path.resolve(_dirname, "./src"),
"@assets": path.resolve(_dirname, "./src/assets"),
"@utils": path.resolve(_dirname, "./src/utils"),
"@components": path.resolve(_dirname, "./src/components"),
},
},
// 服务配置
server: {
port: 3002, // 端口号
open: true, // 自动在浏览器打开
host: "0.0.0.0",
https: false, // 是否开启 https,
proxy: {
"/api": {
target: loadEnv(mode, process.cwd()).VITE_APP_BASE_API,
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
"/readFile": {
target: "http://127.0.0.1",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/readFile/, ""),
},
},
},
// css 处理
// 生产环境
build: {
minify: false,
// 进行压缩计算
brotliSize: false,
//指定输出路径
assetsDir: "./",
// 指定输出文件路径
outDir: "dist",
// 代码压缩配置
terserOptions: {
// 生产环境移除console
compress: {
drop_console: true,
drop_debugger: true,
},
},
// chunkSizeWarningLimit: 1500,大文件报警阈值设置,不建议使用
rollupOptions: {
output: {
//静态资源分类打包
chunkFileNames: "static/js/[name]-[hash].js",
entryFileNames: "static/js/[name]-[hash].js",
assetFileNames: "static/css/[name]-[hash].[ext]",
manualChunks(id) {
//静态资源分拆打包
if (id.includes("node_modules")) {
return id
.toString()
.split("node_modules/")[1]
.split("/")[0]
.toString();
}
},
},
},
},
});
};
pinia 配置：
import {
defineStore
} from "pinia"
// 1.定义并导出容易
// 参数 1：容器的 ID,必须唯一，将来 Pinia 会把所有的容器挂载到跟容器
export const useSysStore = defineStore('sys', {
/\*\*
_ 类似于组件的 data,用来存储全局状态
_/
state: () => {
return {
Viewer: ''
}
},
/**
\* 类似组件的 computed,用来封装计算属性，有缓存功能
*/
getters: {
getViewer() {
return this.Viewer;
}
},
/**
\* 类似组件的 methods,封装业务逻辑，修改 state
*/
actions: {
setViewer(viewer) {
this.Viewer = viewer;
}
},
})
通过 store.getViewer 获取 viewer 实例