From 183ee1f20227c1bbe415e19addda2600d3353a8c Mon Sep 17 00:00:00 2001 From: fmm <1442620801@qq.com> Date: Sat, 10 Aug 2024 22:45:50 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Erspack=E6=9E=84?= =?UTF-8?q?=E5=BB=BA=E5=B7=A5=E5=85=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pro/template/tinyvue/package.json | 7 +- .../pro/template/tinyvue/rspack.config.js | 155 ++++++++++++++++++ .../template/tinyvue/src/router/guard/menu.ts | 6 +- .../tinyvue/src/router/routes/index.ts | 2 +- .../src/views/login/components/login-mail.vue | 2 +- .../pro/template/tinyvue/webpack.config.js | 1 - 6 files changed, 166 insertions(+), 7 deletions(-) create mode 100644 packages/toolkits/pro/template/tinyvue/rspack.config.js diff --git a/packages/toolkits/pro/template/tinyvue/package.json b/packages/toolkits/pro/template/tinyvue/package.json index 4eb7634d..78a95284 100644 --- a/packages/toolkits/pro/template/tinyvue/package.json +++ b/packages/toolkits/pro/template/tinyvue/package.json @@ -10,6 +10,8 @@ "build": "vite build --config ./config/vite.config.prod.ts", "build:wp": "webpack --config webpack.config.js", "dev:wp": "webpack-dev-server --progress --config webpack.config.js", + "dev:rp": "rspack serve", + "build:rp": "rspack build", "report": "cross-env REPORT=true npm run build", "lint-staged": "npx lint-staged", "prepare": "git init && husky install", @@ -56,13 +58,16 @@ "vue": "^3.3.7", "vue-eslint-parser": "^9.3.2", "vue-i18n": "^9.6.2", - "vue-router": "^4.2.5" + "vue-router": "^4.2.5", + "vue-style-loader": "^4.1.3" }, "devDependencies": { "@babel/preset-env": "^7.25.3", "@babel/preset-typescript": "^7.24.7", "@commitlint/cli": "^11.0.0", "@commitlint/config-conventional": "^12.0.1", + "@rspack/cli": "^0.7.5", + "@rspack/core": "^0.7.5", "@types/lodash": "^4.14.177", "@types/nprogress": "^0.2.0", "@typescript-eslint/eslint-plugin": "^5.10.0", diff --git a/packages/toolkits/pro/template/tinyvue/rspack.config.js b/packages/toolkits/pro/template/tinyvue/rspack.config.js new file mode 100644 index 00000000..c0e1c721 --- /dev/null +++ b/packages/toolkits/pro/template/tinyvue/rspack.config.js @@ -0,0 +1,155 @@ +const {resolve} = require('path'); +const { VueLoaderPlugin } = require('vue-loader') +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const rspack = require('@rspack/core'); +const {configDotenv,parse} = require('dotenv'); +const { default: importMetaLoader } = require('import-meta-loader'); +configDotenv({ + path:'./.env' +}) + +/** @type {import('@rspack/cli').Configuration} */ +const config = { + context: __dirname, + entry: { + main: './src/main.ts', + }, + experiments: { + css: true + }, + plugins:[ + new VueLoaderPlugin(), + new rspack.HtmlRspackPlugin({ + template: './index.html', + }), + new rspack.DefinePlugin({ + __VUE_OPTIONS_API__: JSON.stringify(true), + __VUE_PROD_DEVTOOLS__: JSON.stringify(false), + 'import.meta.env.VITE_CONTEXT': '"/vue-pro/"', + 'import.meta.env.VITE_BASE_API': '"/api"', + 'import.meta.env.VITE_SERVER_HOST': '"http://127.0.0.1:3000"', + 'import.meta.env.VITE_MOCK_HOST': '"http://127.0.0.1:8848"', + 'import.meta.env.VITE_USE_MOCK': 'false', + 'import.meta.env.VITE_MOCK_IGNORE': '"/api/user/userInfo,/api/user/login,/api/user/register,/api/employee/getEmployee"', + 'import.meta.env.VITE_MOCK_SERVER_HOST': '"/mock"', + }) + ], + devServer: { + historyApiFallback: true, + proxy:[ + { + context: [process.env.VITE_BASE_API], + target: process.env.VITE_SERVER_HOST, + changeOrigin: true, + pathRewrite: { + '^/api': '' + } + }, + { + context: [process.env.VITE_MOCK_SERVER_HOST], + target: process.env.VITE_MOCK_HOST, + changeOrigin: true, + pathRewrite:{ + '^/mock': '' + } + } + ] + }, + module: { + rules: [ + { + test: /\.vue$/, + loader: 'vue-loader', + options: { + experimentalInlineMatchResource: true, + }, + }, + { + test: /\.ts$/, + loader: 'builtin:swc-loader', + options: { + sourceMap: true, + jsc: { + parser: { + syntax: 'typescript', + }, + }, + }, + type: 'javascript/auto', + }, + { + test: /\.less$/, + loader: 'less-loader', + type: 'css', + }, + { + test: /\.svg$/, + type: 'asset/resource', + }, + { + test: /\.m?js/, + resolve: { + fullySpecified: false + } + }, + { + test: /\.less$/, + use: [ + { + loader: 'less-loader', + options:{ + additionalData: `@import "${resolve('./src/assets/style/breakpoint.less')}";` + } + }, + ], + type: "css" + }, + { + test:/.(png|jpg|jpeg|gif|svg)$/, // 匹配图片文件 + type: "asset", // type选择asset + parser: { + dataUrlCondition: { + maxSize: 10 * 1024, // 小于10kb转base64位 + } + }, + generator:{ + filename:'static/images/[name].[contenthash:8][ext]', // 文件输出目录和命名 + }, + }, + { + test:/.(woff2?|eot|ttf|otf)$/, // 匹配字体图标文件 + type: "asset", // type选择asset + parser: { + dataUrlCondition: { + maxSize: 10 * 1024, // 小于10kb转base64位 + } + }, + generator:{ + filename:'static/fonts/[name].[contenthash:8][ext]', // 文件输出目录和命名 + }, + }, + { + test:/.(mp4|webm|ogg|mp3|wav|flac|aac)$/, // 匹配媒体文件 + type: "asset", // type选择asset + parser: { + dataUrlCondition: { + maxSize: 10 * 1024, // 小于10kb转base64位 + } + }, + generator:{ + filename:'static/media/[name].[contenthash:8][ext]', // 文件输出目录和命名 + }, + }, + ], + }, + resolve: { + alias: { + '@': resolve(__dirname, 'src'), + 'assets': resolve(__dirname, 'src/assets'), + 'vue-i18n$': 'vue-i18n/dist/vue-i18n.esm-bundler.js', + 'vue$': 'vue/dist/vue.esm-bundler.js' + }, + extensions: ['.ts', '.js', '.vue'], + }, +} +module.exports = config; diff --git a/packages/toolkits/pro/template/tinyvue/src/router/guard/menu.ts b/packages/toolkits/pro/template/tinyvue/src/router/guard/menu.ts index a8b904ef..9a0f0d58 100644 --- a/packages/toolkits/pro/template/tinyvue/src/router/guard/menu.ts +++ b/packages/toolkits/pro/template/tinyvue/src/router/guard/menu.ts @@ -24,9 +24,9 @@ export interface ITreeNodeData { // 国际化 locale: string; } - -const views = import.meta.glob('../../views/**/*.vue'); - +const reg = /\.vue$/gim; +const views = import.meta.glob ? import.meta.glob('../../views/**/*.vue') : require.context('../../views', true, reg, 'sync'); +console.log(views) const toRoutes = (menus: ITreeNodeData[]) => { const router: RouteRecordRaw[] = []; for (let i=0;i { diff --git a/packages/toolkits/pro/template/tinyvue/src/views/login/components/login-mail.vue b/packages/toolkits/pro/template/tinyvue/src/views/login/components/login-mail.vue index 30523d42..7e7d55ab 100644 --- a/packages/toolkits/pro/template/tinyvue/src/views/login/components/login-mail.vue +++ b/packages/toolkits/pro/template/tinyvue/src/views/login/components/login-mail.vue @@ -77,7 +77,7 @@ const userStore = useUserStore(); const loginFormMail = ref(); - const views = import.meta.glob('../../**/*.vue'); + // const views = import.meta.glob ? import.meta.glob('../../**/*.vue') : ; const rules = computed(() => { return { diff --git a/packages/toolkits/pro/template/tinyvue/webpack.config.js b/packages/toolkits/pro/template/tinyvue/webpack.config.js index eb8659a1..260614df 100644 --- a/packages/toolkits/pro/template/tinyvue/webpack.config.js +++ b/packages/toolkits/pro/template/tinyvue/webpack.config.js @@ -128,7 +128,6 @@ module.exports = { 'import.meta.env.VITE_USE_MOCK': 'false', 'import.meta.env.VITE_MOCK_IGNORE': '"/api/user/userInfo,/api/user/login,/api/user/register,/api/employee/getEmployee"', 'import.meta.env.VITE_MOCK_SERVER_HOST': '"/mock"', - }) ], resolve: { From aa1a02389d3b405f2c37903a1973dc2af5c25ecf Mon Sep 17 00:00:00 2001 From: fmm <1442620801@qq.com> Date: Sun, 11 Aug 2024 09:32:24 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E6=A3=80=E8=A7=86=E6=84=8F=E8=A7=81?= =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../template/tinyvue/src/views/login/components/login-mail.vue | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/toolkits/pro/template/tinyvue/src/views/login/components/login-mail.vue b/packages/toolkits/pro/template/tinyvue/src/views/login/components/login-mail.vue index 7e7d55ab..40d82744 100644 --- a/packages/toolkits/pro/template/tinyvue/src/views/login/components/login-mail.vue +++ b/packages/toolkits/pro/template/tinyvue/src/views/login/components/login-mail.vue @@ -77,8 +77,6 @@ const userStore = useUserStore(); const loginFormMail = ref(); - // const views = import.meta.glob ? import.meta.glob('../../**/*.vue') : ; - const rules = computed(() => { return { mailname: [