vue 分模块打包,附css、js打包进HTML方法

本文详细介绍了在Vue CLI3环境下如何实现多系统集成下的分模块打包。通过设置环境变量,修改package.json中的命令,配置vue.config.js,实现了每个模块独立的入口、路由和打包配置。同时,文章还提及了如何将CSS和JS内联到HTML中,确保分模块文件的独立运行。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

如题:

1. 先参考https://www.jb51.net/article/196061.htm,分模块打包文件:

本文以vue-cli3+为例,实现多系统集成下的分模块打包。分模块打包方式多种多样,下文可适用于多系统之间互不干扰,主系统可集成各子系统,各子系统又可单独运行的业务场景。

一、目标

我们要实现什么?所谓分模块打包,那么各个模块内就必须得有自己独立的入口文件,路由文件。按照这种构想,我在一个新的脚手架src目录下新建了一个projects目录:

图1

如上图,可以看到Aproject、B、C、D四个项目。我在A项目中建了assets,common和views文件夹,其中assets可以再建img和css的文件夹,common内可以放公共组件或者方法,views页面可以放页面,甚至你还可以建一个components文件夹专门用来放组件。

好了,我们的视图目录结构大概就是上面的样子。我们期待的是,我们可以打包这个A模块这个‘小vue',就像打包一个完整vue的项目一样。那么如何实现这部分呢?

二、打包单个模块

我们知道,在package.json中,有项目启动,打包的命令。

在这里插入图片描述

我们可以从这里入手。

这里就不得不提到cross-env这个模块了。
我们之前在设置生产环境,测试环境,开发环境时也会用到这个模块。在这里不详细表述了。

1

cross-env:npm install --save-dev cross-env

现在我们的思路大概是这样的,当我们执行打包命令的时候,通过cross-env去找到我们的入口文件,然后再打包。

所以我们可以模仿环境变量的写法,在package中写入如下图代码。

在这里插入图片描述

代码:

1

2

3

4

5

6

7

8

"dev:projectA": "cross-env PROJECT_NAME=projectA vue-cli-service serve",

 "dev:projectB": "cross-env PROJECT_NAME=projectB vue-cli-service serve",

 "dev:projectC": "cross-env PROJECT_NAME=projectC vue-cli-service serve",

 "dev:projectD": "cross-env PROJECT_NAME=projectD vue-cli-service serve",

 "build:projectA": "cross-env PROJECT_NAME=projectA vue-cli-service build",

 "build:projectB": "cross-env PROJECT_NAME=projectB vue-cli-service build",

 "build:projectC": "cross-env PROJECT_NAME=projectC vue-cli-service build",

 "build:projectD": "cross-env PROJECT_NAME=projectD vue-cli-service build",

写完了这些,我们就可以着手模仿vue配置小vue的文件了。

在main.js中配置如下代码:

1

2

3

4

5

6

7

8

9

10

11

12

import Vue from "vue";

      import App from "./App.vue";

      import router from "./router";

      import store from "./store";

       

      Vue.config.productionTip = false;

       

      new Vue({

        router,

        store,

        render: h => h(App)

      }).$mount("#app");

在App.vue中配置如下代码:

1

2

3

4

5

6

7

8

9

<template>

       <div id="app">

        <router-view />

       </div>

      </template>

       

      <style lang="less">

       

      </style>

在router.js中配置如下代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

import Vue from "vue";

        import Router from "vue-router";

        import Home from "./views/Home.vue";

         

        Vue.use(Router);

         

        export default new Router({

         routes: [

          {

           path: "/",

           name: "home",

           component: Home

          }

         ]

        });

在page文件夹中建立Home.vue,写入如下代码:

1

2

3

4

5

6

7

8

9

10

11

<template>

         <div>

          我是a项目

         </div>

        </template>

         

        <script>

        export default {};

        </script>

         

        <style></style>

在项目最外层建立config文件夹,在其中新建projectsConfig.js写入:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

const config = {

 projectA: {

  pages: {

   index: {

    entry: "src/projects/projectA/main.js",

    template: "public/index.html",

    filename: "index.html"

   }

  },

  devServer: {

   port: 8080, // 端口地址

   open: false, // 是否自动打开浏览器页面

   host: "0.0.0.0", // 指定使用一个 host,默认是 localhost

   https: false, // 使用https提供服务

   disableHostCheck: true,

   // 设置代理

   proxy: {

    "/eopenhapi": {

     target: "http://open.jdpay.com",

     changeOrigin: true

    },

    "/hapi": {

     target: "http://open.jdpay.com",

     changeOrigin: true

    }

   }

  }

 },

 projectB: {},

 projectC: {}

};

module.exports = config;

把projectsConfig.js并入vue.config.js,vue.config.js中代码如下

1

2

3

4

5

6

7

8

9

10

11

12

13

14

const config = require("./config/projectsConfig.js");

let projectName = process.env.PROJECT_NAME;

module.exports = {

 ...config[projectName],

 // pages: conf.pages,

 // 基本路径

 // baseUrl: './',//vue-cli3.3以下版本使用

 publicPath: "./", // vue-cli3.3+新版本使用

 // 输出文件目录

 outputDir: "dist/" + projectName + "/"

};

写到这里我们就建立一个完整的小vue了。

运行命令 cnpm run dev:projectA


2. 把css、js打包进HTML 

module.exports={
  publicPath: './',//使用相对路径
  productionSourceMap: false,
  // publicPath:"./",  // 可以设置成相对路径,这样所有的资源都会被链接为相对路径,打出来的包可以被部署在任意路径
  outputDir:"dist",  //打包时生成的生产环境构建文件的目录
  chainWebpack: config => {
    config.plugin('preload')
      .tap(args => {
        args[0].fileBlacklist.push(/\.css/, /\.js/)
        return args
      })
    config.plugin('inline-source')
      .use(require('html-webpack-inline-source-plugin'))
    config
      .plugin('html')
      .tap(args => {
        args[0].title = 'JSON和PHP Array 互转'
        args[0].inlineSource = '(\.css|\.js$)'
        return args
      })
  }
}

    ​​​​ 参考:vue项目将css,js全部打包到html文件配置 - Ricardo_front - 博客园 


3. 如果想要在分模块的文件里,也要把css、js打包进单独HTML文件,则以下地方要做一下小改动

  • 插件版本
  • "html-webpack-plugin": "^4.4.1",
  • "html-webpack-inline-source-plugin": "^0.0.10",
  • 配置修改
  • const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')

  • chainWebpack: config => {
    
            config.plugin('preload-index')   // 不分模块这里是preload,分模块就是preload-index
    
            .tap(args => {
    
              args[0].fileBlacklist.push(/\.css/, /\.js/)
    
              return args
    
            })
    
       
    
          config.plugin('inline-source')
    
            .use(HtmlWebpackInlineSourcePlugin)
    
          config
    
            .plugin('html-index')  // 不分模块这里是html,分模块就是html-index
    
            .tap(args => {
    
              args[0].inlineSource = '(\.css|\.js$)'
    
              return args
    
            })
    
     }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值