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

* feat: mock-server替换vite-plugin-mock * fix: ts-node启动冲突解决 * fix: mock-server问题修复 * feat: 新增webpack配置文件&新增http-server配置文件&vite打包修复 * fix: 检视意见修改
opentiny · Aug 10, 2024 · 6e3ec5a · 6e3ec5a
1 parent 1d44071
commit 6e3ec5a
Show file tree

Hide file tree

Showing 27 changed files with 283 additions and 87 deletions.
diff --git a/packages/toolkits/pro/template/tinyvue/.env b/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
diff --git a/packages/toolkits/pro/template/tinyvue/babel.config.js b/packages/toolkits/pro/template/tinyvue/babel.config.js
@@ -1,3 +1,5 @@
 module.exports = {
-  plugins: ['@vue/babel-plugin-jsx'],
+  plugins: [
+    '@vue/babel-plugin-jsx',
+  ]
 };
diff --git a/packages/toolkits/pro/template/tinyvue/config/vite.config.base.ts b/packages/toolkits/pro/template/tinyvue/config/vite.config.base.ts
@@ -3,25 +3,12 @@ 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';
-
-const useMock = !! process.env.VITE_USE_MOCK
 
 const config = {
   plugins: [
     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'),
-    })
   ],
   build: {
     outDir: resolve(__dirname, '../dist'),

diff --git a/packages/toolkits/pro/template/tinyvue/config/vite.config.dev.ts b/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(
   {

diff --git a/packages/toolkits/pro/template/tinyvue/config/vite.config.preview.base.ts b/packages/toolkits/pro/template/tinyvue/config/vite.config.preview.base.ts
@@ -3,23 +3,12 @@ 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';
 
 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'),
-    }),
   ],
   build: {
     outDir: resolve(__dirname, '../dist/vue-pro/pages'),

diff --git a/packages/toolkits/pro/template/tinyvue/config/vite.config.prod.ts b/packages/toolkits/pro/template/tinyvue/config/vite.config.prod.ts
@@ -1,12 +1,11 @@
 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,
     plugins: [configCompressPlugin('gzip'), configVisualizerPlugin()],
     build: {
       rollupOptions: {
@@ -19,5 +18,5 @@ export default mergeConfig(
       chunkSizeWarningLimit: 2000,
     },
   },
-  baseConig
+  baseConfig
 );
diff --git a/packages/toolkits/pro/template/tinyvue/dev.env b/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
diff --git a/packages/toolkits/pro/template/tinyvue/index.html b/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>
diff --git a/packages/toolkits/pro/template/tinyvue/package.json b/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,9 +31,15 @@
     ]
   },
   "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",
@@ -43,12 +52,15 @@
     "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 +69,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,14 +111,17 @@
     "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"
   },
   "resolutions": {
     "bin-wrapper": "npm:bin-wrapper-china",
-    "rollup": "^2.56.3",
     "gifsicle": "5.2.0"
   }
 }
diff --git a/packages/toolkits/pro/template/tinyvue/src/api/board.ts b/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);
 }
diff --git a/packages/toolkits/pro/template/tinyvue/src/api/form.ts b/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`);
 }
diff --git a/packages/toolkits/pro/template/tinyvue/src/api/interceptor.ts b/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();

diff --git a/packages/toolkits/pro/template/tinyvue/src/api/list.ts b/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}`);

diff --git a/packages/toolkits/pro/template/tinyvue/src/api/profile.ts b/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`);
 }
diff --git a/packages/toolkits/pro/template/tinyvue/src/api/user.ts b/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) {

diff --git a/packages/toolkits/pro/template/tinyvue/src/main.ts b/packages/toolkits/pro/template/tinyvue/src/main.ts
@@ -6,15 +6,12 @@ import router from './router';
 import store from './store';
 import i18n from './locale';
 import directive from './directive';
-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();
 
 registerMap('china', chinaMap as any);
 const app = createApp(App);

diff --git a/packages/toolkits/pro/template/tinyvue/src/mock/board.ts b/packages/toolkits/pro/template/tinyvue/src/mock/board.ts
@@ -1,6 +1,5 @@
-import { MockMethod } from 'vite-plugin-mock';
 import Mock from 'mockjs';
-import { successResponseWrap } from '@/utils/setup-mock';
+import { successResponseWrap } from '../utils/setup-mock';
 
 const initData = Mock.mock({
   options: [
@@ -95,4 +94,4 @@ export default [
       return result;
     },
   },
-] as MockMethod[];
+] as any;
diff --git a/packages/toolkits/pro/template/tinyvue/src/mock/index.ts b/packages/toolkits/pro/template/tinyvue/src/mock/index.ts
@@ -1,9 +1,24 @@
-import user from './user';
+import {createMockServer} from '@gaonengwww/mock-server';
 import list from './list';
 import froms from '../views/form/step/mock';
 import profile from './profile';
 import board from './board';
 
-const index = [...user, ...list, ...froms, ...profile, ...board];
+let mockData = [] as any
+for(let i=0; i<board.length; i+=1){
+  mockData.push(board[i])
+}
+for(let i=0; i<list.length; i+=1){
+  mockData.push(list[i])
+}
+for(let i=0; i<froms.length; i+=1){
+  mockData.push(froms[i])
+}
+for(let i=0; i<profile.length; i+=1){
+  mockData.push(profile[i])
+}
+
+createMockServer({
+  mocks: mockData,
+})
 
-export default index;