test: add env variable demo (originjs#127)

xepozz · Feb 16, 2022 · 4c0f939 · 4c0f939
1 parent c374843
commit 4c0f939
Show file tree

Hide file tree

Showing 21 changed files with 342 additions and 82 deletions.
diff --git a/.gitignore b/.gitignore
@@ -104,7 +104,7 @@ dist
 .tern-port
 
 .idea
-
+.DS_Store
 package-lock.json
 
 launch.json

diff --git a/packages/examples/vue3-advanced-demo/router-host/.env.development b/packages/examples/vue3-advanced-demo/router-host/.env.development
@@ -0,0 +1,2 @@
+NODE_ENV=development
+VITE_APP_TITLE=My App (development)
diff --git a/packages/examples/vue3-advanced-demo/router-host/.env.pro b/packages/examples/vue3-advanced-demo/router-host/.env.pro
@@ -0,0 +1,2 @@
+NODE_ENV=production
+VITE_APP_TITLE=My App (pro)
diff --git a/packages/examples/vue3-advanced-demo/router-host/.env.staging b/packages/examples/vue3-advanced-demo/router-host/.env.staging
@@ -0,0 +1,2 @@
+NODE_ENV=production
+VITE_APP_TITLE=My App (staging)
diff --git a/packages/examples/vue3-advanced-demo/router-host/index.html b/packages/examples/vue3-advanced-demo/router-host/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="#"/>
-    <title>Vite App</title>
+    <title><%= title %></title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/packages/examples/vue3-advanced-demo/router-host/package.json b/packages/examples/vue3-advanced-demo/router-host/package.json
@@ -8,7 +8,9 @@
     "build": "vite build",
     "clean": "rm -rf dist",
     "stop": "kill-port --port 5004",
-    "restart": "yarn stop & yarn  build & yarn serve"
+    "restart": "yarn stop & yarn  build & yarn serve",
+    "staging": "vite build --mode=staging",
+    "pro": "vite build --mode=pro"
   },
   "dependencies": {
     "element-plus": "^1.1.0-beta.20",
@@ -19,6 +21,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^1.3.0",
     "@vue/compiler-sfc": "^3.2.0",
-    "vite": "^2.5.0"
+    "vite": "^2.5.0",
+    "vite-plugin-html": "^3.0.6"
   }
 }
diff --git a/packages/examples/vue3-advanced-demo/router-host/src/App.vue b/packages/examples/vue3-advanced-demo/router-host/src/App.vue
@@ -120,7 +120,9 @@ export default {
       }
       state.showMenu = !noMenu.includes(to.path)
       state.currentPath = to.path
-      document.title = api.pathMap[to.name]
+      if(to.name && api.pathMap[to.name]) {
+        document.title = api.pathMap[to.name]
+      }
     })
 
     onUnmounted(() => {

diff --git a/packages/examples/vue3-advanced-demo/router-host/vite.config.ts b/packages/examples/vue3-advanced-demo/router-host/vite.config.ts
@@ -1,39 +1,52 @@
-import {defineConfig} from "vite";
+import { defineConfig, loadEnv } from "vite";
 import vue from "@vitejs/plugin-vue";
 import federation from "@originjs/vite-plugin-federation";
-
+import { createHtmlPlugin } from 'vite-plugin-html'
 // https://vitejs.dev/config/
-export default defineConfig({
-    plugins: [
-        vue(),
-        federation({
-            name: "router-host",
-            filename: "remoteEntry.js",
-            remotes: {
-                "router-remote": "http://localhost:5005/assets/remoteEntry.js",
-            },
-            shared: ["vue", "vue-router", "element-plus", "vuex"]
-        })
-    ],
-    // optimizeDeps:{
-    //     include: ["element-plus"]
-    // },
+export default defineConfig(({ mode }) => {
+    const root = process.cwd()
+
+    const env = loadEnv(mode, root)
+    return {
+        plugins: [
+            vue(),
+            federation({
+                name: "router-host",
+                filename: "remoteEntry.js",
+                remotes: {
+                    "router-remote": "http://localhost:5105/assets/remoteEntry.js",
+                },
+                shared: ["vue", "vue-router", "element-plus", "vuex"]
+            }),
+            createHtmlPlugin({
+                inject: {
+                    // Inject data into ejs template
+                    data: {
+                        title: env.VITE_APP_TITLE,
+                    },
+                },
+            }),
+        ],
+        // optimizeDeps:{
+        //     include: ["element-plus"]
+        // },
 
-    // 解决 const Home = {template: '<p>Home</p>'} 类组件无法在 vue-router 中显示的问题
-    resolve:{
-        alias:{
-            vue : 'vue/dist/vue.esm-bundler.js',
-            'vue-router': 'vue-router/dist/vue-router.esm-bundler.js'
-        }
-    },
-    build: {
-        target: 'esnext',
-        minify: false,
-        cssCodeSplit: true,
-        rollupOptions: {
-            output: {
-                minifyInternalExports: false
+        // 解决 const Home = {template: '<p>Home</p>'} 类组件无法在 vue-router 中显示的问题
+        resolve: {
+            alias: {
+                vue: 'vue/dist/vue.esm-bundler.js',
+                'vue-router': 'vue-router/dist/vue-router.esm-bundler.js'
+            }
+        },
+        build: {
+            target: 'esnext',
+            minify: false,
+            cssCodeSplit: true,
+            rollupOptions: {
+                output: {
+                    minifyInternalExports: false
+                }
             }
-        }
-    },
-});
+        },
+    }
+})
diff --git a/packages/examples/vue3-advanced-demo/router-remote/.env.development b/packages/examples/vue3-advanced-demo/router-remote/.env.development
@@ -0,0 +1,2 @@
+NODE_ENV=development
+VITE_APP_TITLE=My App (development)
diff --git a/packages/examples/vue3-advanced-demo/router-remote/.env.pro b/packages/examples/vue3-advanced-demo/router-remote/.env.pro
@@ -0,0 +1,2 @@
+NODE_ENV=production
+VITE_APP_TITLE=My App (pro)
diff --git a/packages/examples/vue3-advanced-demo/router-remote/.env.staging b/packages/examples/vue3-advanced-demo/router-remote/.env.staging
@@ -0,0 +1,2 @@
+NODE_ENV=production
+VITE_APP_TITLE=My App (staging)
diff --git a/packages/examples/vue3-advanced-demo/router-remote/index.html b/packages/examples/vue3-advanced-demo/router-remote/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="#"/>
-    <title>Vite App</title>
+    <title><%= title %></title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/packages/examples/vue3-advanced-demo/router-remote/package.json b/packages/examples/vue3-advanced-demo/router-remote/package.json
@@ -8,7 +8,9 @@
     "build": "vite build",
     "clean": "rm -rf dist",
     "stop": "kill-port --port 5005",
-    "restart": "yarn stop & yarn  build & yarn serve"
+    "restart": "yarn stop & yarn  build & yarn serve",
+    "staging": "vite build --mode=staging",
+    "pro": "vite build --mode=pro"
   },
   "dependencies": {
     "echarts": "^5.2.1",
@@ -21,7 +23,9 @@
     "@rollup/plugin-replace": "^3.0.0",
     "@vitejs/plugin-vue": "^1.3.0",
     "@vue/compiler-sfc": "^3.2.0",
+    "rollup-plugin-copy": "^3.4.0",
     "unplugin-element-plus": "0.1.0",
-    "vite": "^2.5.0"
+    "vite": "^2.5.0",
+    "vite-plugin-html": "^3.0.6"
   }
 }
diff --git a/packages/examples/vue3-advanced-demo/router-remote/public/.gitignore b/packages/examples/vue3-advanced-demo/router-remote/public/.gitignore
@@ -0,0 +1 @@
+assets
diff --git a/packages/examples/vue3-advanced-demo/router-remote/src/components/ProductList.vue b/packages/examples/vue3-advanced-demo/router-remote/src/components/ProductList.vue
@@ -48,3 +48,8 @@ export default {
   // }
 }
 </script>
+<style scoped>
+.el-button {
+  color: red;
+}
+</style>
diff --git a/packages/examples/vue3-advanced-demo/router-remote/vite.config.ts b/packages/examples/vue3-advanced-demo/router-remote/vite.config.ts
@@ -1,45 +1,69 @@
-import {defineConfig} from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import federation from "@originjs/vite-plugin-federation";
 import ElementPlus from 'unplugin-element-plus/vite'
-
+import copy from 'rollup-plugin-copy'
+import { createHtmlPlugin } from 'vite-plugin-html'
 // https://vitejs.dev/config/
-export default defineConfig({
-    plugins: [
-        // @rollup/plugin-replace 无法对打包后的代码进行 replace
-        // replace({
-        //     'createBaseVNode,': 'createBaseVNode,createBaseVNode as createElementVNode'
-        // }),
+export default defineConfig(({ mode }) => {
+    const root = process.cwd()
+
+    const env = loadEnv(mode, root)
+    console.log(env);
+    return {
+        plugins: [
+            // @rollup/plugin-replace 无法对打包后的代码进行 replace
+            // replace({
+            //     'createBaseVNode,': 'createBaseVNode,createBaseVNode as createElementVNode'
+            // }),
 
-        // @rollup/plugin-legacy 针对源码生成导出的，非本场景
+            // @rollup/plugin-legacy 针对源码生成导出的，非本场景
 
-        ElementPlus(),
-        vue(),
-        federation({
-            name: 'router-remote',
-            filename: 'remoteEntry.js',
-            exposes: {
-                './ElementPlus': './src/components/ElementPlus.vue',
-                './ElSubMenuDashboard': './src/components/ElSubMenuDashboard.vue',
-                './Login': './src/views/Login.vue',
-                './Footer': './src/components/Footer.vue',
-                './Header': './src/components/Header.vue',
-                './ProductList': './src/components/ProductList.vue',
-                './ShoppingCart': './src/components/ShoppingCart.vue'
-            },
-            shared: ["vue", "vue-router", "element-plus", "vuex"]
-        })
-    ],
-    build: {
-        polyfillModulePreload: false,
-        assetsInlineLimit: 40960,
-        target: 'esnext',
-        minify: false,
-        cssCodeSplit: false,
-        rollupOptions: {
-            // external: ["vue"],
-            output: {
-                minifyInternalExports: false
+            ElementPlus(),
+            vue(),
+            federation({
+                name: 'router-remote',
+                filename: 'remoteEntry.js',
+                exposes: {
+                    './ElementPlus': './src/components/ElementPlus.vue',
+                    './ElSubMenuDashboard': './src/components/ElSubMenuDashboard.vue',
+                    './Login': './src/views/Login.vue',
+                    './Footer': './src/components/Footer.vue',
+                    './Header': './src/components/Header.vue',
+                    './ProductList': './src/components/ProductList.vue',
+                    './ShoppingCart': './src/components/ShoppingCart.vue'
+                },
+                shared: ["vue", "vue-router", "element-plus", "vuex"]
+            }),
+            createHtmlPlugin({
+                inject: {
+                    // Inject data into ejs template
+                    data: {
+                        title: env.VITE_APP_TITLE,
+                    },
+                },
+            }),
+            copy({
+                targets: [
+                    {
+                        src: 'dist/assets',
+                        dest: 'public',
+                    },
+                ],
+                hook: 'writeBundle', // notice here
+            }),
+        ],
+        build: {
+            polyfillModulePreload: false,
+            assetsInlineLimit: 40960,
+            target: 'esnext',
+            minify: false,
+            cssCodeSplit: false,
+            rollupOptions: {
+                // external: ["vue"],
+                output: {
+                    minifyInternalExports: false
+                }
             }
         }
     }

diff --git a/packages/examples/vue3-demo-webpack-esm-var/home/package.json b/packages/examples/vue3-demo-webpack-esm-var/home/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@vue3-demo/home",
+  "name": "@vue3-demo/home-wbp-esm-war",
   "private": true,
   "version": "1.0.0",
   "scripts": {

diff --git a/packages/examples/vue3-demo-webpack-esm-var/layout/package.json b/packages/examples/vue3-demo-webpack-esm-var/layout/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@vue3-demo/layout-esm",
+  "name": "@vue3-demo/layout-wbp-esm-var",
   "private": true,
   "version": "1.0.0",
   "scripts": {

diff --git a/packages/examples/vue3-demo-webpack-systemjs/home/package.json b/packages/examples/vue3-demo-webpack-systemjs/home/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@vue3-demo/home",
+  "name": "@vue3-demo/home-wbp-systemjs",
   "private": true,
   "version": "1.0.0",
   "scripts": {

diff --git a/packages/examples/vue3-demo-webpack-systemjs/layout/package.json b/packages/examples/vue3-demo-webpack-systemjs/layout/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@vue3-demo/layout-esm",
+  "name": "@vue3-demo/layout-wbp-systemjs",
   "private": true,
   "version": "1.0.0",
   "scripts": {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		NODE_ENV=development
		VITE_APP_TITLE=My App (development)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		NODE_ENV=production
		VITE_APP_TITLE=My App (pro)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		NODE_ENV=production
		VITE_APP_TITLE=My App (staging)