哈尔滨专业网站制作,用dw做的网站生成链接吗,网站设计师发展方向,wordpress小工具显示不了本项目使用Vite5 Vue3进行构建。
要使用vite工程构建浏览器插件#xff0c;无非就是要实现popup页面和options页面。这就需要在项目中用到多入口打包#xff08;生成多个html文件#xff09;。
实现思路#xff1a;
通过配置vite工程#xff0c;使得项目打包后有两个h…本项目使用Vite5 Vue3进行构建。
要使用vite工程构建浏览器插件无非就是要实现popup页面和options页面。这就需要在项目中用到多入口打包生成多个html文件。
实现思路
通过配置vite工程使得项目打包后有两个html文件。同时打包入口打包background.js。在manifest.json文件中配置popup、options、background等内容。将项目中的manifest.json文件打包至dist目录下。
第一步、创建Vue3项目并调整目录结构
npm create vuelatest通过此命令创建项目创建后调整项目目录结构由下图所示 项目根目录的index.html打包后配置为popupoptions.html配置为options。 将manifest.json放在src目录下当然也可以放在public目录下打包时vite自动将静态资源打包至dist目录下。放在src目录下更符合个人的开发模式。
第二步、编写index.html和options.html
由于index.html打包后配置为popup页面所以应该这样写
!DOCTYPE html
html langenheadmeta charsetUTF-8link relicon href/favicon.icometa nameviewport contentwidthdevice-width, initial-scale1.0titleVite App/title/headbodydiv idapp/div!-- 引入popup的入口ts--script typemodule srcsrc/popup/main.ts/script/body
/html
同样options.html应引入src/options/main.ts
第三步、编写popup/main.ts和options/main.ts
两者的内容基本相同
import ../assets/main.cssimport { createApp } from vue
import elementPlus from element-plus
import element-plus/dist/index.css
// popup页面引入Popup组件options页面引入Options组件
import Popup from ./Popup.vueconst app createApp(Popup)
app.use(elementPlus)
app.mount(#app)
第四步、编写vite配置文件
此文件主要实现两部分内容其他实现读者可自行添加。
将src目录下的manifest.json打包构建时移到dist目录下。配置多入口文件。
import { fileURLToPath, URL } from node:urlimport { defineConfig } from vite
import vue from vitejs/plugin-vue
import { viteStaticCopy } from vite-plugin-static-copy
import { resolve } from path// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),viteStaticCopy({targets: [{ src: src/*.json, dest: ./ },]})],build: {rollupOptions: {input: {index: resolve(__dirname, index.html),options: resolve(__dirname, options.html),background: resolve(__dirname, src/background.ts),},output: {entryFileNames: [name].js,}},outDir: dist,},resolve: {alias: {: fileURLToPath(new URL(./src, import.meta.url))}}
})第五步、编写manifest.json文件
{name: xxx,version: 1.0,description: xxx,homepage_url: https://xxx.com,manifest_version: 3,icons: {16: logo.png,48: logo.png,64: logo.png,128: logo.png},commands: {reload_extension: {suggested_key: {default: CtrlShiftK,mac: CommandShiftK},global: true,description: Toggle My Extension}},action: {default_icon: logo.png,default_popup: index.html},options_page: options.html,background: {service_worker: background.js,type: module},permissions: [management,scripting,notifications,contextMenus,webRequest,storage,tabs,activeTab,nativeMessaging]
}通过以上的几个步骤即可实现浏览器插件使用vue项目开发同时支持popup页面和options页面以及background.js。
