VUE3后台管理系统第二章，打包多入口配置输入不同命令打包不同内容

项目打包配置目录结构

具体项目安装初始化在就不细说了

package.json配置

{
  "name": "smartintegration",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "dev:all": "cross-env VUE_BUILD_TARGET=all vite dev",
    "dev:bms": "cross-env VUE_BUILD_TARGET=bms vite dev",
    "dev:form": "cross-env VUE_BUILD_TARGET=form vite dev",
    "build": "cross-env VUE_BUILD_TARGET=all vite build",
    "build:all": "cross-env VUE_BUILD_TARGET=all vite build",
    "build:bms": "cross-env VUE_BUILD_TARGET=bms vite build",
    "build:form": "cross-env VUE_BUILD_TARGET=form vite build",
    "node": "cross-env nodemon app.js",
    "preview": "vite preview",
    "test:unit": "vitest",
    "build-only": "vite build",
    "type-check": "vue-tsc --build --force"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.3.1",
    "@vueuse/core": "^11.0.3",
    "axios": "^1.7.7",
    "element-plus": "^2.8.1",
    "nprogress": "^0.2.0",
    "pinia": "^2.1.7",
    "swiper": "^11.1.14",
    "vue": "^3.4.29",
    "vue-awesome-swiper": "^5.0.1",
    "vue-router": "^4.3.3",
    "vuedraggable": "next",
    "vxe-pc-ui": "next",
    "vxe-table": "next"
  },
  "devDependencies": {
    "@tsconfig/node20": "^20.1.4",
    "@types/jsdom": "^21.1.7",
    "@types/node": "^20.14.5",
    "@types/nprogress": "^0.2.3",
    "@vitejs/plugin-vue": "^5.0.5",
    "@vitejs/plugin-vue-jsx": "^4.0.0",
    "@vue/test-utils": "^2.4.6",
    "@vue/tsconfig": "^0.5.1",
    "cross-env": "^7.0.3",
    "jsdom": "^24.1.0",
    "npm-run-all2": "^6.2.0",
    "sass-embedded": "^1.77.8",
    "typescript": "~5.4.0",
    "vite": "^5.3.1",
    "vite-plugin-lazy-import": "^1.0.7",
    "vitest": "^1.6.0",
    "vue-tsc": "^2.0.21",
    "nodemon": "^3.1.0",
    "express": "^4.19.2",
    "body-parser": "^1.20.2"
  }
}

目录结构

在这里插入图片描述 #### node模块
方便接口调试，以及后续打包文件同步，修改文件等功能在项目中添加了node模块

模块依赖

  "nodemon": "^3.1.0",
  "express": "^4.19.2",
  "body-parser": "^1.20.2"

代码app.js,node文件夹

app.js

import express from 'express';
const app = express();
import bodyParser from 'body-parser';
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
const port = 9527;
import routes from './node/index.js';
app.all("*", function (req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  res.setHeader('Access-Control-Allow-Credentials', true);
  next();
});
app.use(routes);
app.listen(port, () => {
  console.log(`服务启动成功，端口号为：${port}`);
});

node文件夹

在这里插入图片描述
index.js路由信息

import express from 'express';
let router = express.Router();
import test from './router/test/index.js';
router.get('/test', function (req, res) {
    test(req.query,function(data){
        res.send(data);
    });
});
import test1 from './router/test1/index.js';
router.post('/test1', function (req, res) {
    test1(req.body,function(data){
        res.send(data);
    });
});
export default router;

test/index

/*
    测试接口
*/
const test = function(query_data,callback){
    callback({
        code:"0",
        msg:"成功",
        data:{
            list:[
                {id:"1"},
                {id:"2"},
                {id:"2"},
                {id:"2"},
                {id:"2"},
            ]
        }
    })
};
export default test;

package.json/scripts配置命令

"node": "cross-env nodemon app.js",

启动服务
在这里插入图片描述
查看效果
http://192.168.10.63:9527/test
#### 打包配置
需求是用不同命令打包不同内容。全量打包，单独打包表单可视化，打包表单以外的其他功能，我用的是多个页面入口的方式

不同的页面不同的入口文件
根据变量VUE_BUILD_TARGET执行打包操作

"dev:all": "cross-env VUE_BUILD_TARGET=all vite dev",
"dev:bms": "cross-env VUE_BUILD_TARGET=bms vite dev",
"dev:form": "cross-env VUE_BUILD_TARGET=form vite dev",
"build": "cross-env VUE_BUILD_TARGET=all vite build",
"build:all": "cross-env VUE_BUILD_TARGET=all vite build",
"build:bms": "cross-env VUE_BUILD_TARGET=bms vite build",
"build:form": "cross-env VUE_BUILD_TARGET=form vite build",

vite.config配置打包出口配置

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import path from 'path'
const vitem_build_target = process.env.VUE_BUILD_TARGET;
export default defineConfig({
  base:  './',
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag === 'component',
        },
      },
    }),
    vueJsx()
  ],
  root:process.cwd(),
  build: {
    emptyOutDir: true,
    outDir:path.resolve(__dirname,`dist/${build_file()}`),
    rollupOptions: {
      input: {
        main:path.resolve(__dirname,`${build_export()}.html`),
      },
      output: {
        entryFileNames: `assets/js/[name]-[hash].js`,
        chunkFileNames: "assets/js/[name]-[hash].js",
        assetFileNames: "assets/[ext]/[name]-[hash].[ext]",
      },
      plugins: [
        {
          name: `${build_export()}`,
          buildEnd() {
            console.log('构建完成！');
          }
        }
      ]
    },
  },
  server: {
    open: `${build_export()}.html`,
    proxy: {
      '/test': {
        target: 'http://192.168.10.63:9527',
        changeOrigin: true,
      },
    },
  },
  define: {
    'process.env': process.env
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    modules: {
      localsConvention: 'camelCase'
    }
  }
})
function build_file() {
  let dirname = vitem_build_target=="all"?"all":
  vitem_build_target=="form"?"form":
  vitem_build_target=="bms"?"bms":"all";
  return `${dirname}`;
};
function build_export() {
  let dirname = vitem_build_target=="all"?"index":
  vitem_build_target=="form"?"form":
  vitem_build_target=="bms"?"bms":"index";
  return `${dirname}`;
};