vite vue插件打包配置
import { defineConfig, UserConfigExport, ConfigEnv } from "vite";
import externalGlobals from "rollup-plugin-external-globals";
import vue from "@vitejs/plugin-vue";
import dts from "vite-plugin-dts";
const path = require("path");
// https://vitejs.dev/config/
export default defineConfig({
build: {
target: "esnext",
outDir: "dist",
lib: {
entry: path.resolve(__dirname, "./src/main.ts"),
name: "myLib", //全局变量的名称
fileName: "my-lib", //输出文件的名字
},
rollupOptions: {
plugins: [
//CDN引入的话，使用这个插件做配置。但是这里引入的文件要是遵循umd格式的，此项只会在打包的文件中使用，未打包状态下的dev模式中不会走这里
externalGlobals({
vue: "Vue",
}),
],
},
},
plugins: [
vue(),
dts({
insertTypesEntry: true,
copyDtsFiles: false,
}),
],
});
几个CDN的例子：
html页面：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- <script src="https://unpkg.com/vue@3.2.26/dist/vue.global.js"></script> <script src="https://unpkg.com/vue-router@4.0.12/dist/vue-router.global.js"></script> --> <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.0-beta.7/vue.global.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.10/vue-router.global.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script> <title>Vite App</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.ts"></script> </body> </html>
vite.config.js:
import { defineConfig } from "vite";
import externalGlobals from "rollup-plugin-external-globals";
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
build: {
rollupOptions: {
plugins: [
externalGlobals({
"vue-router": "VueRouter",
'vue':'Vue',
'axios':'axios'
}),
],
},
},
});//其中key就是你引入的时候的名字，value就是引入的那个第三方库的全局变量名字
原因就是默认的打包入口 根目录的index.html删除了。这时候就需要对vite.config.ts进行配置了：
build: { // 打包设置
// Template for index.html 入口配置
rollupOptions:{
// 原因就是默认的打包入口 根目录的index.html删除了。这时候就需要对vite.config.ts进行配置了：
input: 'src/pages/default/index.html'
},
minify: 'terser', // 必须启用：terserOptions配置才会有效
terserOptions: {
compress: {
// 生产环境时移除console.log调试代码
drop_console:true,
drop_debugger: true,
}
}
},
