weixin_44867717的博客

vue

vue

vue

Vue 2 中，使用Vite作为前端构建开发工具，替代webpack（二）常见问题——和webpack 入口文件同名冲突 & 将commonjs转化为es module-cjs2esmodule常用问题【踩坑】1、 vite 目前要求入口文件必须是根目录下的 index.html，如果之前的 webpack 入口文件同名，需要更改。解决方案：vite.config.js:import { injectHtml } from 'vite-plugin-html';export default

Vue 2 中，使用Vite作为前端构建开发工具，替代webpack（一）——vite.config.js配置文件当前版本 vite@2.3.7和vite@2.4.4"vite": "^2.4.4",一、 适合什么项目迁移使用 vue2 的系统内部系统 - 无需大型流量场景：因为 vite 更迭较快，导致系统需要定期改动基础功能，造成不稳定非 ssr 系统 - ssr 还有很多问题，暂且等社区丰富起来定期有人维护的系统对开发有痛点而想要改进：比如打包慢，冷启动慢，HMR 更新慢。。。。

vue2中，操作流程实例版之使用vite-Web开发构建工具 & baseURL基准地址-直接赋值和间接赋值1、基本介绍Vite是Vue的作者尤雨溪开发的Web开发构建工具。除了Vite外，前端著名的构建工具还有Webpack和Gulp。和Vue3可以完美结合。它是一个基于浏览器原生ES模块导入的开发服务器，在开发环境下，基于浏览器支持 dynamic import去解析import，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随启随用，使得启动速度快得惊人，同时支持任意类型文件的解

vue2中，使用vite流程之应用前端构建工具vite和vite-plugin-vue2插件Vite 官方中文文档——https://cn.vitejs.dev/vite-plugin-vue2包——https://www.npmjs.com/package/vite-plugin-vue2随着vite2的发布，vite越来越独立于vue存在，同时借助于vite-plugin-vue2插件，大量vue2的工程也终于可以搭上vite开发的快车。操作流程如下：1、vue-cli生成vue2工程vue

配置项目——vue.config.js第一步：查看接口文档的字段和端口号第二步：在vue.config.js中，proxy里面定义自定义名字/devStatusApi、target地址、pathRewrite同名字第三步：在文件src/api/serviceConfig.js中，配置和导出devStatusApilet devStatusApi,if (process.env.NODE_ENV === 'development'){ devStatusApi = '/devStatusA

IE浏览器的适配、兼容——将 ES6 代码转为 ES5 代码 & babel-loader & @babel/polyfill在webpack官网-搜索关键字 babel-loaderbabel-loader加载器插件包：https://webpack.js.org/loaders/babel-loader/#root第一步：命令行安装包npm install -D babel-loader @babel/core @babel/preset-env 第二步：webpack.co

npm run serve 和 npm start ，在命令行中启动项目指令的区别基于vue-cli搭建的文件，为了测试方便，不使用 npm run serve启动项目时，可进行如下操作启动项目在package.json文件中：{ "name": "01-demo", "version": "0.1.0", "private": true, "scripts": {+ ...

webpack基础2——webpack.config.jsconst path = require('path')// 生成html在dist目录下const HtmlWebpackPlugin = require('html-webpack-plugin')// 清理 dist 目录 参考 https://webpack.js.org/guides/output-management/...

webpack基础——package.json文件内容{ "name": "webpack-demo-79", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exi...

webpack基础01-模块化历程起初，js没有模块化概念，导致出现一些问题：容易造成变量污染文件之间的依赖关系模糊浏览器端模块化：异步模块化规范require.js 是AMD规范 （异步模块化规范） 依赖前置sea.js 说CMD规范（通过模块化规范 异步） 依赖就近Nodejs模块化：同步模块化规范CommonJS规范导出：module.exports导入...

21-webpack-打包部署——路由懒加载 解决 首屏加载慢 的问题路由懒加载 解决 登录页首屏加载慢 的问题路由懒加载：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html原因：所有第三包打包在一起，资源体积比较大，会导致资源运行时比较慢echarts包体积比较就比较大，且是局部使用，可以单独进行引入...

19-webpack-路径别名——@符设置src下文件的绝对路径基于webpack，可以使用@符设置src下文件的绝对路径入口文件index.js修改 vue文件的 绝对路径第一步：webpack.config.js中进行加载器配置 //解析路径 resolve: { //别名 alias: { //resolve 获取绝对路径的API，join...

18-webpack-打包vue文件vue-loader不是webpack提供的，而是vue本身提供的：Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件：https://vue-loader.vuejs.org/zh/#vue-loader-是什么？手动配置vue-loader：https://vue...

17-webpack-热更新——浏览器不刷新，更新打包后的结果实现浏览器不刷新，更新打包后的结果，默认对js不生效，对样式生效。https://www.webpackjs.com/guides/hot-module-replacement/#启用-hmr第一步：webpack.config.js中配置文件服务器即可+ const webpack = require('webpack')...

15-webpack-watch监听——监听到代码变化，自动实现打包可以指示 webpack “watch” 依赖图中的所有文件以进行更改。如果其中一个文件被更新，代码将被重新编译，所以你不必手动运行整个构建。webpack官网—>中文文档—>指南—>开发—>使用观察模式：https://www.webpackjs.com/guides/development/#...

14-webpack-sourceMap——为了更容易地追踪代码错误和警告项目打包后，dist解析的代码位置相较于源代码会发生变化为了更容易地追踪错误和警告，JavaScript 提供了 source map 功能，将编译后的代码映射回原始源代码。如果一个错误来自于 b.js，source map 就会明确的告诉你。——功能：会记录代码打包后，所在源代码中的位置；发生错误时，会准确显示在第几行...

12-webpack-babel介绍目前部分浏览器和 Node.js 已经支持 ES6，但由于它们对 ES6 所有的标准支持不全，这导致在开发中不敢全面地使用 ES6。Babel 是一个 JavaScript 编译器，能将 ES6 代码转为 ES5 代码，让你使用最新的语言特性而不用担心兼容性问题，把采用 ES6 编写的代码转换成目前已经支持良好的 ES5 代码。英文官网：htt...

11-webpack-清理dist在每次打包前，清空dist目录。中文版（此处会报错）https://www.webpackjs.com/guides/output-management/#清理-dist-文件夹用英文版（指定清理dist）https://webpack.js.org/guides/output-management/#cleaning-up-the-dist-fol...

10-webpack-生成html应用——把外边的模板html代码自动生成到dist目录下html插件（设定-htmlwebpackplugin）-可以把根目录下的index.html打包到dist目录https://www.webpackjs.com/guides/output-management/#设定-htmlwebpackplugin第一步：命令行 安装 打包插件npm ...

08-webpack-打包图片第一步：在src/assets下，创建图片文件夹images,新建src/assets/images/logo.png文件第二步：webpack.config.js中配置文件，因为webpack默认打包js文件，如果引入其他格式图片文件，需要用对应的加载器插件处理该文件，把代码解析成js文件，才可以加载图片等格式文件https://www.webpackjs.c...

06-webpack-打包css加载css：https://www.webpackjs.com/guides/asset-management/#加载-css第一步：创建文件 src/index.html,引入main.js文件，第二步：创建calc.js功能文件，打开html网页，按F12，可以显示打印出来——30，检测webpack默认打包成功应用：打包css文件，并进行页面显示...

01-模块化历程起初，js没有模块化概念，导致出现一些问题：容易造成变量污染文件之间的依赖关系模糊浏览器端模块化：异步模块化规范require.js 是AMD规范 （异步模块化规范） 依赖前置sea.js 说CMD规范（通过模块化规范 异步） 依赖就近Nodejs模块化：同步模块化规范CommonJS规范导出：module.exports导入：require...