vue element ui scaffold webpack4
1.0.0
It has been upgraded to webpack5 . If you need to use webpack4, you can switch branches: git checkout webpack4 .
**vue3 + element-ui + webpack5 version: switchable branch: git checkout vue3 **
This project is a multi-page, multi-environment scaffolding project that uses element-plus under Vue and is built based on webpack5.
Project effect preview 1 Project effect preview 2
git clone https://github.com/hzsrc/vue-element-ui-scaffold-webpack4.git
# git checkout vue3
cd vue-element-ui-scaffold-webpack4
npm install
Faster build speed and smaller package file size.
Two ways to automatically output html page files (implemented by html-webpack-plugin):
During development, modify or add or delete svg files in the src/iconfont/svgs directory to automatically generate font icons (supporting ttf, woff2, woff, eot, svg) and supporting css styles and html previews; at the same time, hot reload is immediate You can see the effect. You can also use npm run build-font to generate these files manually. There is no need to manually go to icomoon.io or iconfont.cn to generate and modify font icons, css, and icon previews. Implemented based on webpack-iconfont-plugin-nodejs.
The project can use dynamic-mocker as the data simulation of the back-end interface. The simulation data is located in the mock folder and is implemented using js files, which is easy to understand, convenient and flexible.
Enabling method: 1. npm run dev will start the mock service at the same time by default. 2. Run alone: npm run mock.
Configuration file: 1. The interface service address in config/serverMap.js is: base: '"//localhost:8085"' 2. The mock/mock-config.js file configures various parameters of the mock.
The source of css on-demand loading points directly to the scss file of element-plus, not the precompiled css file. Append the src/assets/css/element-theme/theme-changed.scss file to the element-plus theme variable file theme-chalk/src/common/var.scss at compile time through the join-file-content-plugin plugin. It is possible to view the effect immediately after modifying the scss variable without pre-compiling the element-plus scss file into a css file. At the same time, element-plus's scss variables can be referenced anywhere in the project.
Use the webpack-theme-color-replacer plug-in to extract the style rules containing theme colors in the css when building webpack, and generate a css/theme-colors.css file. Then when the web page is running, download this css file and dynamically replace the colors in it with the custom theme color. Since only the color-related css is extracted, the speed is much faster than downloading the entire css of element-plus. And not only element-plus styles, but also the theme colors of self-written styles in the project can be replaced.
When publishing code, source code mapping files are generated to a unified source code mapping folder and automatically mapped in the test environment. For the sake of code security, the production environment does not perform automatic mapping. If debugging is required, Chrome supports manual mapping of the source code through the URL. According to security requirements, this source code mapping folder name is a folder name that only developers know. Or use a dynamic encryption algorithm to generate this folder name. Or place these source code mapping files in the website directory that requires login verification. Please modify the name of the directory in the getSourceMapPath function of the config/index.js file as needed. In this way, when a bug occurs and online debugging is required, source code mapping can be quickly and manually added to facilitate debugging, and source code leakage is avoided.
Use the simple solution of vw+rem to implement responsive layout. Use the postcss-pxtorem plug-in to automatically convert the unit in css from px to rem. During development, px is still used as the css length unit. 1rem = 100px, easy to convert during debugging. Common to PC and mobile terminals (it is best to replace element-plus with other UI frameworks for mobile terminals).
Compatible with IE10 and above, Chrome, Firefox, Safari, QQ, 360, 2345 and other browsers. If you need to change to the mobile version, please modify .browsersrc to the mobile version.
npm run dev
Local development and debugging. Use the backend interface service address configured by dev in config/serverMap.js.
npm run build-test
Used for test environment deployment. js has source code mapping, css has no source code mapping. Use the interface service address configured by test in config/serverMap.js.
npm run build
For production environment deployment. Use the interface service address configured by prod in config/serverMap.js.
npm run build-demo
The configuration is the same as the production environment, only the interface service address is different. Use the interface service address configured by the demo in config/serverMap.js.
npm run build-dev
Used to publish and deploy to the development environment server, suitable for situations where publishing to the server is required for debugging. Use the interface service address configured by dev in config/serverMap.js.
npm run build-preview
Static mock data will be enabled, no back-end service is required, and mock data will be used to simulate ajax calls (provided that the corresponding api interface has written mock data). Equivalent to npm run build --preview && npm run play-dist .
npm run play-dist
With the dist directory as the root directory, start a local static http service to view the running results of the dist directory after publishing.
npm run mock
When the back-end interface service has not been completed, it can be used to simulate the back-end interface data to debug the front-end function.
npm run proxy80
By proxying the existing port (port 80xx) to port 80 or port 443, the port can be hidden during access and https access can also be achieved. Combined with the system hosts and configuring 127.0.0.1 as the specified domain name, you can directly use the domain name to access the local debugging page, which is used to debug some scenarios where domain name access must be used (such as debugging WeChat, for details, see: https://www.cnblogs.com/hz -blog/p/wechat-local-debug-domain.html).
