项目集成配置

2分
198 阅读2分钟
  • 多页应用集成配置
  • 单页应用集成配置
  • APP本地dist包集成配置

一. 多页应用集成配置

最终配置地址

配置说明文档

二. 单页应用集成配置

最终配置地址

三. APP本地dist包集成配置

最终配置地址

1.要求

  • 项目中所有的库和文件尽量打包到 dist 内
  • 同时打包的 dist,应该是 APP 内仅需的几个页面(必须 APP 只需要本地加载首页和我的页面,则 dist 内只应该包含首页和我的页面资源,避免 APP 包体积过大)
  • 同时支持本地 dist 包方式和 web 线上部署两种方式

2.配置

(1)package.json

打包命令应该修改入口文件,原入口文件都是main.js;

build:dev:home命令将入口文件指到./src/index.js

{
    ...
    "scripts": {
        "build:dev": "vue-cli-service build --mode dev",
        "build:prd": "vue-cli-service build --mode prd",
        "build:dev:home": "vue-cli-service build --mode dev ./src/index.js"
    },
    ...
}

(2)入口文件配置

之所以重新写一个入口文件,是因为本地dist包要剔除一些线上部署不需要的页面,有利于减小APP的包大小(dist需要放到APP包内)

视情况而定, dist内的资源是否需要路由等,不需要的可以删除配置(下面的代码中不包含路由)

/src/index.js

import { createApp } from "vue";
// 只需引入入口文件即可,如需添加路由等其他逻辑,可以自行添加
import Index from "./Index.vue";
createApp(Index).mount("#app");

/src/Index.vue

<template>
  <div class="index-page">
    <home v-show="showHome"></home>
    <my v-show="!showHome"></my>
  </div>
</template>

<script>
// 引入两个组件,动态切换
import Home from "@/views/Home";
import My from "@/views/My";
export default {
  name: "Index",
  data() {
    return {
      showHome: false,
    };
  },
  components: { Home, My },
};
</script>

(3)模板配置修改

因为APP内加载dist包本就是为了提高加载速度,减少html,js,css等文件的网络请求,所以尽量的将依赖文件都打入到dist内.

vue.config.js配置中,需要去掉Vue,VueRouter,lodash等库文件的网络请求

// 以下是配置完成后的结果
const path = require("path");

console.log("当前环境变量NODE_ENV:", process.env.NODE_ENV);

module.exports = {
  chainWebpack: (config) => {
    const types = ["vue-modules", "vue", "normal-modules", "normal"];
    types.forEach((type) =>
      addStyleResource(config.module.rule("scss").oneOf(type))
    );
  },
  // 需要删除此处, 才能把Vue,VueRouter,lodash等库文件打入dist包内
  /*if (process.env.NODE_ENV === "production") {
      config.set("externals", {
        vue: "Vue",
        "vue-router": "VueRouter",
        lodash: "_",
      });
    }*/
};

function addStyleResource(rule) {
  rule
    .use("style-resource")
    .loader("style-resources-loader")
    .options({
      patterns: [path.resolve(__dirname, "./src/styles/common.scss")],
    });
}

/public/index.html的修改, 需要删除vue,vue-router,loadsh等库文件的网络加载

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <-- <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.7/vue.global.prod.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.5/vue-router.global.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script> !-->
    <title>vue项目配置</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
avatar
文章
阅读
粉丝