Forráskód Böngészése

切换为vite模式

piexlmax 3 éve
szülő
commit
bed2db4065
6 módosított fájl, 155 hozzáadás és 49 törlés
  1. 15 0
      web/index.html
  2. 46 42
      web/package.json
  3. 2 2
      web/src/router/index.js
  4. 0 3
      web/src/utils/_import.js
  5. 19 2
      web/src/utils/asyncRouter.js
  6. 73 0
      web/vite.config.js

+ 15 - 0
web/index.html

@@ -0,0 +1,15 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<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="favicon.ico">
+    <title></title>
+  </head>
+<body>
+<div id="app"></div>
+<script type="module" src="./src/main.js"></script>
+</body>
+</html>

+ 46 - 42
web/package.json

@@ -1,44 +1,48 @@
 {
-  "name": "gin-vue-admin",
-  "version": "2.3.5",
-  "private": true,
-  "scripts": {
-    "serve": "node openDocument.js && vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
-  },
-  "dependencies": {
-    "axios": "^0.19.2",
-    "core-js": "^3.6.5",
-    "echarts": "4.9.0",
-    "element-plus": "^1.1.0-beta.8",
-    "highlight.js": "^10.6.0",
-    "marked": "^2.0.0",
-    "mitt": "^3.0.0",
-    "path": "^0.12.7",
-    "qs": "^6.8.0",
-    "quill": "^1.3.7",
-    "screenfull": "^5.0.2",
-    "script-ext-html-webpack-plugin": "^2.1.4",
-    "spark-md5": "^3.0.1",
-    "vue": "^3.0.0",
-    "vue-particle-line": "^0.1.4",
-    "vue-router": "^4.0.0-0",
-    "vuex": "^4.0.0-0",
-    "vuex-persist": "^2.1.0"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-plugin-vuex": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0",
-    "babel-eslint": "^10.1.0",
-    "babel-plugin-import": "^1.13.3",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0",
-    "sass": "^1.26.5",
-    "sass-loader": "^8.0.2"
-  }
+	"name": "gin-vue-admin",
+	"version": "2.3.5",
+	"private": true,
+	"scripts": {
+		"serve": "node openDocument.js && vite",
+		"build": "vite build",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"axios": "^0.19.2",
+		"core-js": "^3.6.5",
+		"echarts": "4.9.0",
+		"element-plus": "^1.1.0-beta.8",
+		"highlight.js": "^10.6.0",
+		"marked": "^2.0.0",
+		"mitt": "^3.0.0",
+		"path": "^0.12.7",
+		"qs": "^6.8.0",
+		"quill": "^1.3.7",
+		"screenfull": "^5.0.2",
+		"script-ext-html-webpack-plugin": "^2.1.4",
+		"spark-md5": "^3.0.1",
+		"vue": "^3.0.0",
+		"vue-particle-line": "^0.1.4",
+		"vue-router": "^4.0.0-0",
+		"vuex": "^4.0.0-0",
+		"vuex-persist": "^2.1.0"
+	},
+	"devDependencies": {
+		"@vue/cli-plugin-babel": "~4.5.0",
+		"@vue/cli-plugin-eslint": "~4.5.0",
+		"@vue/cli-plugin-router": "~4.5.0",
+		"@vue/cli-plugin-vuex": "~4.5.0",
+		"@vue/cli-service": "~4.5.0",
+		"@vue/compiler-sfc": "^3.1.5",
+		"babel-eslint": "^10.1.0",
+		"babel-plugin-import": "^1.13.3",
+		"eslint": "^6.7.2",
+		"eslint-plugin-vue": "^7.0.0",
+		"sass": "^1.26.5",
+		"sass-loader": "^8.0.2",
+		"vite": "2",
+		"@vitejs/plugin-legacy": "^1.4.4",
+		"vite-plugin-importer": "^0.2.5",
+		"@vitejs/plugin-vue": "latest"
+	}
 }

+ 2 - 2
web/src/router/index.js

@@ -7,12 +7,12 @@ const routes = [{
 {
   path: '/init',
   name: 'Init',
-  component: () => import('@/view/init/index')
+  component: () => import('@/view/init/index.vue')
 },
 {
   path: '/login',
   name: 'Login',
-  component: () => import('@/view/login/index')
+  component: () => import('@/view/login/index.vue')
 }
 ]
 

+ 0 - 3
web/src/utils/_import.js

@@ -1,3 +0,0 @@
-module.exports = file => () => {
-  return import ('@/' + file)
-}

+ 19 - 2
web/src/utils/asyncRouter.js

@@ -1,8 +1,10 @@
-const _import = require('./_import') // 获取组件的方法
+const modules = import.meta.glob('../../view/**/*.vue')
+
 export const asyncRouterHandle = (asyncRouter) => {
   asyncRouter.map(item => {
     if (item.component) {
-      item.component = _import(item.component)
+      item.component = dynamicImport(modules, item.component)
+      console.log(item.component)
     } else {
       delete item['component']
     }
@@ -11,3 +13,18 @@ export const asyncRouterHandle = (asyncRouter) => {
     }
   })
 }
+
+function dynamicImport(
+  dynamicViewsModules,
+  component
+) {
+  const keys = Object.keys(dynamicViewsModules)
+  const matchKeys = keys.filter((key) => {
+    let k = key.replace('../../view', '')
+    const lastIndex = k.lastIndexOf('.')
+    k = k.substring(0, lastIndex)
+    return k === component
+  })
+  const matchKey = matchKeys[0]
+  return dynamicViewsModules[matchKey]
+}

+ 73 - 0
web/vite.config.js

@@ -0,0 +1,73 @@
+/* eslint-disable */
+import legacyPlugin from '@vitejs/plugin-legacy';
+// import usePluginImport from 'vite-plugin-importer';
+import * as path from 'path';
+import vuePlugin from '@vitejs/plugin-vue';
+// @see https://cn.vitejs.dev/config/
+export default ({
+  command,
+  mode
+}) => {
+  let rollupOptions = {};
+
+
+  let optimizeDeps = {};
+
+
+  let alias = {
+    '@': path.resolve(__dirname, './src'),
+    'vue$': 'vue/dist/vue.runtime.esm-bundler.js',
+  }
+
+  let proxy = {
+    'undefined': {
+      "target": "undefined:undefined/",
+      "changeOrigin": true,
+      "pathRewrite": {
+        "^undefined": ""
+      }
+    },
+  }
+
+  let define = {
+    'process.env.NODE_ENV': '"development"',
+  }
+
+  let esbuild = {}
+
+  return {
+    base: './', // index.html文件所在位置
+    root: './', // js导入的资源路径,src
+    resolve: {
+      alias,
+    },
+    define: define,
+    server: {
+      // 代理
+      proxy,
+    },
+    build: {
+      target: 'es2015',
+      minify: 'terser', // 是否进行压缩,boolean | 'terser' | 'esbuild',默认使用terser
+      manifest: false, // 是否产出maifest.json
+      sourcemap: false, // 是否产出soucemap.json
+      outDir: 'build', // 产出目录
+      rollupOptions,
+    },
+    esbuild,
+    optimizeDeps,
+    plugins: [
+      legacyPlugin({
+        targets: ['Android > 39', 'Chrome >= 60', 'Safari >= 10.1', 'iOS >= 10.3', 'Firefox >= 54', 'Edge >= 15'],
+      }), vuePlugin(),
+    ],
+    css: {
+      preprocessorOptions: {
+        less: {
+          // 支持内联 JavaScript
+          javascriptEnabled: true,
+        }
+      }
+    },
+  }
+}