feat: 支持在初始化项目时选择vite/webpack/rspack/farm等构建工具

packages/toolkits/pro/template/tinyvue/.env

@@ -1,5 +1,8 @@
 VITE_CONTEXT=/vue-pro/
 VITE_BASE_API=/api
 VITE_SERVER_HOST= http://127.0.0.1:3000
+VITE_MOCK_HOST= http://127.0.0.1:8848
 VITE_USE_MOCK= false
 VITE_MOCK_IGNORE= /api/user/userInfo,/api/user/login,/api/user/register,/api/employee/getEmployee
+
+VITE_MOCK_SERVER_HOST=/mock

packages/toolkits/pro/template/tinyvue/babel.config.js

@@ -1,3 +1,5 @@
 module.exports = {
-  plugins: ['@vue/babel-plugin-jsx'],
+  plugins: [
+    '@vue/babel-plugin-jsx',
+  ]
 };

packages/toolkits/pro/template/tinyvue/config/vite.config.base.ts

@@ -3,7 +3,7 @@ import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import svgLoader from 'vite-svg-loader';
-import { viteMockServe } from 'vite-plugin-mock';
+// import { viteMockServe } from 'vite-plugin-mock';
 
 const useMock = !! process.env.VITE_USE_MOCK
 
@@ -12,16 +12,16 @@ const config = {
     vue(),
     vueJsx(),
     svgLoader({ svgoConfig: {} }),
-    viteMockServe({
-      mockPath: '../src/mock', // mock文件地址
-      localEnabled:useMock, // 开发打包开关
-      prodEnabled:true, // 生产打包开关 // 这样可以控制关闭mock的时候不让mock打包到最终代码内
-      injectCode: ` import { setupProdMockServer } from '../src/mockProdServer'; setupProdMockServer(); `,
-      logger: true, // 是否在控制台显示请求日志
-      supportTs: false, // 打开后，可以读取 ts 文件模块。 请注意，打开后将无法监视.js 文件
-      watchFiles:true,
-      injectFile: resolve('../src/main.ts'),
-    })
+    // viteMockServe({
+    //   mockPath: '../src/mock', // mock文件地址
+    //   localEnabled:useMock, // 开发打包开关
+    //   prodEnabled:true, // 生产打包开关 // 这样可以控制关闭mock的时候不让mock打包到最终代码内
+    //   injectCode: ` import { setupProdMockServer } from '../src/mockProdServer'; setupProdMockServer(); `,
+    //   logger: true, // 是否在控制台显示请求日志
+    //   supportTs: false, // 打开后，可以读取 ts 文件模块。 请注意，打开后将无法监视.js 文件
+    //   watchFiles:true,
+    //   injectFile: resolve('../src/main.ts'),
+    // })
   ],
   build: {
     outDir: resolve(__dirname, '../dist'),

packages/toolkits/pro/template/tinyvue/config/vite.config.dev.ts

@@ -13,6 +13,11 @@ const proxyConfig = {
         ''
       ),
   },
+  [loadEnv('', process.cwd()).VITE_MOCK_SERVER_HOST]: {
+    target: loadEnv('', process.cwd()).VITE_MOCK_HOST,
+    changeOrigin: true,
+    rewrite: (path:string) => path.replace(/^\/mock/, '')
+  }
 };
 export default mergeConfig(
   {

packages/toolkits/pro/template/tinyvue/config/vite.config.preview.base.ts

@@ -3,23 +3,23 @@ import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import svgLoader from 'vite-svg-loader';
-import { viteMockServe } from 'vite-plugin-mock';
+// import { viteMockServe } from 'vite-plugin-mock';
 
 export default defineConfig({
   plugins: [
     vue(),
     vueJsx(),
     svgLoader({ svgoConfig: {} }),
-    viteMockServe({
-      // 更多配置见最下方
-      mockPath: '../src/mock', // mock文件地址
-      localEnabled: true, // 开发打包开关
-      prodEnabled: true, // 生产打包开关 // 这样可以控制关闭mock的时候不让mock打包到最终代码内
-      injectCode: ` import { setupProdMockServer } from '../src/mockProdServer'; setupProdMockServer(); `,
-      logger: false, // 是否在控制台显示请求日志
-      supportTs: false, // 打开后，可以读取 ts 文件模块。 请注意，打开后将无法监视.js 文件
-      injectFile: resolve('../src/main.ts'),
-    }),
+    // viteMockServe({
+    //   // 更多配置见最下方
+    //   mockPath: '../src/mock', // mock文件地址
+    //   localEnabled: true, // 开发打包开关
+    //   prodEnabled: true, // 生产打包开关 // 这样可以控制关闭mock的时候不让mock打包到最终代码内
+    //   injectCode: ` import { setupProdMockServer } from '../src/mockProdServer'; setupProdMockServer(); `,
+    //   logger: false, // 是否在控制台显示请求日志
+    //   supportTs: false, // 打开后，可以读取 ts 文件模块。 请注意，打开后将无法监视.js 文件
+    //   injectFile: resolve('../src/main.ts'),
+    // }),
   ],
   build: {
     outDir: resolve(__dirname, '../dist/vue-pro/pages'),

packages/toolkits/pro/template/tinyvue/config/vite.config.prod.ts

@@ -1,12 +1,12 @@
 import { mergeConfig } from 'vite';
-import baseConig from './vite.config.base';
+import baseConfig from './vite.config.base';
 import configCompressPlugin from './plugin/compress';
 import configVisualizerPlugin from './plugin/visualizer';
 
 export default mergeConfig(
   {
     mode: 'production',
-    mock: true,
+    // mock: true,
     plugins: [configCompressPlugin('gzip'), configVisualizerPlugin()],
     build: {
       rollupOptions: {
@@ -19,5 +19,5 @@ export default mergeConfig(
       chunkSizeWarningLimit: 2000,
     },
   },
-  baseConig
+  baseConfig
 );

packages/toolkits/pro/template/tinyvue/dev.env

@@ -0,0 +1,8 @@
+VITE_CONTEXT=/vue-pro/
+VITE_BASE_API=/api
+VITE_SERVER_HOST= http://127.0.0.1:3000
+VITE_MOCK_HOST= http://127.0.0.1:8848
+VITE_USE_MOCK= false
+VITE_MOCK_IGNORE= /api/user/userInfo,/api/user/login,/api/user/register,/api/employee/getEmployee
+
+VITE_MOCK_SERVER_HOST=/mock

packages/toolkits/pro/template/tinyvue/http.server.config.js

@@ -0,0 +1,19 @@
+// server-config.js
+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+module.exports = function(app) {
+  app.use('/api', createProxyMiddleware({
+    target: 'http://http://127.0.0.1:3000', // 目标服务器地址
+    changeOrigin: true, // 改变源地址，使目标服务器认为请求来自代理服务器
+    pathRewrite: {
+      '^/api': '', // 重写请求路径
+    },
+  }));
+  app.use('/mock', createProxyMiddleware({
+    target: 'http://127.0.0.1:8848', // 目标服务器地址
+    changeOrigin: true, // 改变源地址，使目标服务器认为请求来自代理服务器
+    pathRewrite: {
+      '^/mock': '', // 重写请求路径
+    },
+  }));
+};

packages/toolkits/pro/template/tinyvue/index.html

@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="./src/main.ts"></script>
+     <script type="module" src="./src/main.ts"></script>
   </body>
 </html>

packages/toolkits/pro/template/tinyvue/package.json

@@ -8,9 +8,12 @@
   "scripts": {
     "start": "vite --config ./config/vite.config.dev.ts --port 3031",
     "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",
     "report": "cross-env REPORT=true npm run build",
     "lint-staged": "npx lint-staged",
-    "prepare": "git init && husky install"
+    "prepare": "git init && husky install",
+    "mock": "tsx ./src/mock/index.ts"
   },
   "lint-staged": {
     "*.{js,ts,jsx,tsx}": [
@@ -28,27 +31,37 @@
     ]
   },
   "dependencies": {
+    "@babel/core": "^7.25.2",
+    "@gaonengwww/mock-server": "^1.0.5",
     "@opentiny/hwc-client": "^0.0.14",
     "@opentiny/vue": "^3.11.1",
+    "@opentiny/vue-icon": "^3.17.0",
+    "@opentiny/vue-locale": "^3.17.0",
+    "@opentiny/vue-theme": "^3.17.5",
     "@types/mockjs": "^1.0.9",
+    "@types/node": "^22.1.0",
     "@vueuse/core": "^10.5.0",
     "@vueuse/head": "^2.0.0",
     "axios": "^1.6.0",
     "dayjs": "^1.11.10",
     "echarts": "~5.4.3",
     "echarts4": "npm:[email protected]",
     "fp-ts": "2.16.1",
+    "http-proxy-middleware": "^3.0.0",
     "mitt": "^3.0.1",
     "moment": "^2.29.4",
     "nprogress": "^1.0.0-1",
     "pinia": "2.1.7",
     "query-string": "^8.1.0",
+    "style-resources-loader": "^1.5.0",
     "vue": "^3.3.7",
     "vue-eslint-parser": "^9.3.2",
     "vue-i18n": "^9.6.2",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.25.3",
+    "@babel/preset-typescript": "^7.24.7",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^12.0.1",
     "@types/lodash": "^4.14.177",
@@ -57,27 +70,40 @@
     "@typescript-eslint/parser": "^5.10.0",
     "@vitejs/plugin-vue": "^4.3.4",
     "@vitejs/plugin-vue-jsx": "^3.0.2",
+    "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
     "@vue/babel-plugin-jsx": "^1.1.5",
+    "@vue/babel-preset-jsx": "^1.4.0",
+    "babel-loader": "^9.1.3",
+    "core-js": "3",
     "cross-env": "^7.0.3",
+    "css-loader": "^7.1.2",
+    "dotenv": "^16.4.5",
     "eslint": "^7.2.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-import-resolver-typescript": "^2.4.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^8.3.0",
+    "html-webpack-plugin": "^5.6.0",
     "husky": "^7.0.4",
-    "less": "^4.1.2",
+    "import-meta-loader": "^1.1.0",
+    "less": "^4.2.0",
+    "less-loader": "^12.2.0",
     "lint-staged": "^11.2.6",
     "mockjs": "^1.1.0",
     "prettier": "^3.0.3",
     "rollup-plugin-visualizer": "^5.9.2",
+    "style-loader": "^4.0.0",
     "stylelint": "^13.8.0",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-order": "^4.1.0",
-    "typescript": "^4.5.5",
+    "ts-loader": "^9.5.1",
+    "ts-node": "^10.9.2",
+    "tsx": "^4.17.0",
+    "typescript": "^4.9.5",
     "unplugin-vue-components": "^0.17.21",
     "vite": "^4.4.9",
     "vite-plugin-compression": "^0.5.1",
@@ -86,7 +112,11 @@
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-style-import": "2.0.0",
     "vite-svg-loader": "^4.0.0",
-    "vue-tsc": "^1.8.22"
+    "vue-loader": "^17.4.2",
+    "vue-tsc": "^1.8.22",
+    "webpack": "^5.65.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.7.1"
   },
   "engines": {
     "node": ">=14.0.0"

packages/toolkits/pro/template/tinyvue/src/api/board.ts

@@ -1,19 +1,20 @@
 import axios from 'axios';
 
+axios.defaults.timeout = 5000;
 // 获取select的option
 export function getUserData() {
-  return axios.get('/api/user/getdata');
+  return axios.get(`${import.meta.env.VITE_MOCK_SERVER_HOST}/api/user/getdata`);
 }
 
 export function getUserPractic() {
-  return axios.get('/api/user/getrpractic');
+  return axios.get(`${import.meta.env.VITE_MOCK_SERVER_HOST}/api/user/getrpractic`);
 }
 
 export function getUserTrain() {
-  return axios.get('/api/user/getrtrain');
+  return axios.get(`${import.meta.env.VITE_MOCK_SERVER_HOST}/api/user/getrtrain`);
 }
 
 // 切换数据源
 export function getUserChange(data: string) {
-  return axios.post('/api/user/getselect', data as any);
+  return axios.post(`${import.meta.env.VITE_MOCK_SERVER_HOST}/api/user/getselect`, data as any);
 }

packages/toolkits/pro/template/tinyvue/src/api/form.ts

@@ -22,15 +22,15 @@ export type UnitStepModel = PersonalModel & CompanyInfoModel;
 
 // 获取base表单的初始数据选项
 export function getBaseData() {
-  return axios.get('/api/base/getdata');
+  return axios.get(`${import.meta.env.VITE_MOCK_SERVER_HOST}/api/base/getdata`);
 }
 
 // 表单的数据提交&&校验
 export function submitStepForm(data: UnitStepModel) {
-  return axios.post('/api/channel-form/submit', { data });
+  return axios.post(`${import.meta.env.VITE_MOCK_SERVER_HOST}/api/channel-form/submit`, { data });
 }
 
 // 获取step表单的初始数据选项
 export function getStepData() {
-  return axios.get('/api/step/getdata');
+  return axios.get(`${import.meta.env.VITE_MOCK_SERVER_HOST}/api/step/getdata`);
 }

packages/toolkits/pro/template/tinyvue/src/api/interceptor.ts

@@ -11,15 +11,15 @@ export interface HttpResponse<T = unknown> {
 }
 
 const { VITE_API_BASE_URL, VITE_BASE_API, VITE_MOCK_IGNORE } =
-  import.meta.env || {};
+  import.meta.env || {VITE_BASE_API:'', VITE_MOCK_IGNORE: ''};
 
 if (VITE_API_BASE_URL) {
   axios.defaults.baseURL = VITE_API_BASE_URL;
 }
 
 const ignoreMockApiList = VITE_MOCK_IGNORE?.split(',') || [];
 axios.interceptors.request.use(
-  (config: AxiosRequestConfig) => {
+  (config: AxiosRequestConfig): any => {
     const isProxy = ignoreMockApiList.includes(config.url);
     if (isProxy) {
       config.url = config.url?.replace(VITE_BASE_API, '/api/v1');
@@ -33,7 +33,7 @@ axios.interceptors.request.use(
       config.headers.Authorization = `Bearer ${token}`;
     }
 
-    config.headers = { ...config.headers };
+     config.headers = { ...config.headers };
 
     return config;
   },
@@ -49,6 +49,7 @@ axios.interceptors.response.use(
     return res;
   },
   (error) => {
+    console.log(error)
     const { status, data } = error.response;
     if (status === 401) {
       clearToken();

packages/toolkits/pro/template/tinyvue/src/api/list.ts

@@ -7,7 +7,7 @@ export interface QueryTaskParmas {
 }
 
 export function queryEmployeeList(params: QueryTaskParmas) {
-  return axios.post('/api/employee/getEmployee', params);
+  return axios.post(`${import.meta.env.VITE_MOCK_SERVER_HOST}/api/employee/getEmployee`, params);
 }
 export function deleteEmployee(id: string) {
   return axios.delete(`/api/employee/delete?id=${id}`);

packages/toolkits/pro/template/tinyvue/src/api/profile.ts

@@ -2,5 +2,5 @@ import axios from 'axios';
 
 // 获取detail表单的初始数据选项
 export function getDetailData() {
-  return axios.get('/api/detail/getdata');
+  return axios.get(`${import.meta.env.VITE_MOCK_SERVER_HOST}/api/detail/getdata`);
 }

packages/toolkits/pro/template/tinyvue/src/api/user.ts

@@ -68,7 +68,7 @@ export function updateUserInfo(data: any) {
 }
 
 export function getUserData(data?: UserData) {
-  return axios.post<UserRes>('/api/user/data', data);
+  return axios.post<UserRes>(`${import.meta.env.VITE_MOCK_SERVER_HOST}/api/user/data`, data);
 }
 
 export function registerUser(data: any) {

packages/toolkits/pro/template/tinyvue/src/main.ts

@@ -6,15 +6,15 @@ import router from './router';
 import store from './store';
 import i18n from './locale';
 import directive from './directive';
-import { setupProdMockServer } from './mockProdServer';
-import './mock';
+// import { setupProdMockServer } from './mockProdServer';
+// import './mock';
 import App from './App.vue';
 import '@/api/interceptor';
 import '@/assets/style/global.less';
 import config from '../hwc-exports.json';
 import chinaMap from './assets/chaina.json';
 
-if(import.meta.env.VITE_USE_MOCK) setupProdMockServer();
+// if(import.meta.env.VITE_USE_MOCK) setupProdMockServer();
 
 registerMap('china', chinaMap as any);
 const app = createApp(App);