xiasohuai的博客

【代码】vue3浏览器报错解决Uncaught runtime errors。

利用vite 和 vue-cli 创建vue3的项目

最初，chunks（以及内部导入的模块）是通过内部 webpack 图谱中的父子关系关联的。CommonsChunkPlugin曾被用来避免他们之间的重复依赖，但是不可能再做进一步的优化。从 webpack v4 开始，移除了CommonsChunkPlugin，取而代之的是optimization.splitChunks。optimization.splitChunks下面这个配置对象代表SplitChunksPlugin的默认行为。webpack.config.jsmod...

直接使用插件解决这个问题！第一步：先下载这个插件第二步：修改vue.config.js配置文件const CompressionPlugin = require("compression-webpack-plugin")............plugins: [new CompressionPlugin({algorithm: 'gzip',test: /\.(js|css|less)$/, // 匹配文件名th...

一、项目创建1、使用简洁的webapck配置模板webpack-simple初始化项目vue init webpack-simple vue-name#简洁的webapck配置模板2、编写组件代码二、发布到 npm在发布前，我们要修改我们的配置文件1.webpack.config.js// 原module.exports = { entry: '....

当我们基于webpack进行开发时，在页面引入图片（包括img的src和background的url）,就会遇到一些问题。问题1:引用路径的问题拿background样式用url引入背景图来说，我们都知道，webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝

1.安装inspect-brknpminstall--save-devinspect-brk2.假设我们的需求是想调试项目文件夹下的webpack配置文件：webpack.config.js在当前webpack项目工程文件夹下面，执行命令行：node --inspect-brk ./node_modules/webpack/bin/webpack.js --inline --progress其中参数--inspect-brk就是以调试模式启动node：会观察到输出：Deb...

vue-cli2.01.配置webpack.prod.conf.js 配置output加t=[chunkhash:8]相当于加时间戳，用于清缓存output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js?t=[chunkhash:8]'), chunkFilename: utils.assetsPath('js/[id].[chunkhas..

一、路由懒加载（必须的）️vue-cli 3.0 模式就使用了Babel，我们需要添加syntax-dynamic-import插件，才能使 Babel 可以正确地解析语法。// 安装插件 syntax-dynamic-importcnpm install --save-dev @babel/plugin-syntax-dynamic-import// 修改babel.config.jsmodule.exports = { "presets": [ "@vue/app" ..

解决方案在vue.config.js中module.export = {}中加入一行productionSourceMap: false,这样虽然对带宽很友好，但是调试起来就不是那么轻松了。我们在代码出错的时候，肯定最希望能定位其在源码中的位置。所以个人感觉还是有必要保留的。...

resolve作用：path.resolve() 该方法将一些的 路径/路径段 解析为绝对路径。语法：path.resolve([...paths])说明：...paths <string> 一个路径或路径片段的序列 如果没有传入 path 片段，或者path 片段长度为零（空字符），则 path.resolve() 会返回当前工作目录的绝对路径(相当于使用path....

渲染一个“元组件”为动态组件。依is的值，来决定哪个组件被渲染。<!-- 动态组件由 vm 实例的属性值 `componentId` 控制 --><component :is="componentId"></component><!-- 也能够渲染注册过的组件或 prop 传入的组件 --><component :is="$o...

修改配置文件config/index.js原本内容为 '/'。没有小点；解决的问题是：文档发布找文件路径是在当前路径下找相对路径，否则的话会找绝对路径build/utils.js【此处关键】解决的问题是：样式表里引入的背景图片原本会自动加入'static/css'。把背景图识别到了样式css的目录下加上词句后，就可以找到样式表外层目录；需要注意的是：样式表里引...

跨域的解决办法有很多，比如script标签 、jsonp、后端设置cros等等...,但是我这里讲的是webpack配置vue 的 proxyTable解决跨域。访问接口：https://fs.52yiyantang.com/index.php?g=Fs&m=FsApi&a=index那么在ProxyTable中具体配置如下:proxyTable: { ...

创建vue-cli3.0项目首先安装 npm install -g @vue/cli然后vue create 项目名称jiangyanxias-MacBook-Air:~ jyx$ vue create vue-cli3-project/Users/jyx/.nvm/versions/node/v10.15.3/lib/node_modules/@vue/cli/node_modul...

什么是SourceMap？我们在项目进行打包后，会将开发中的多个文件代码打包到一个文件中，并且经过压缩，去掉多余的空格，且babel编译化后，最终会用于线上环境，那么这样处理后的代码和源代码会有很大的差别，当有bug的时候，我们只能定位到压缩处理后的代码位置，无法定位到开发环境中的代码，对于开发不好调式，因此sourceMap出现了，它就是为了解决不好调式代码问题的。在项目开发完进行打包后...

require.context是什么一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块。require.context( )语法如下：require.con...

做前端的大家都知道通过vue开发的项目每次创建新组建的时候，都要新建一个目录，然后新增.vue/.js/.less文件，在这个文件中再写入template、 引入script和style这些内容，虽然在写入的时候大家都有自己的自动补全，不过每次都要这样重复操作，很麻烦有没有。本文就是通过node来帮助我们，自动去执行这些重复操作，而我们只需要告诉控制台我们需要创建的组件名字就可...

1.安装npm install --save-dev less-loader less2.在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /\.less$/, use: [{ loader: "style-loader" }, { ...

1.安装npm install sass-loader node-sass --save-dev2.在build文件夹下的webpack.base.conf.js的rules里面添加配置{ test: /\.sass$/, loaders: ['style', 'css', 'sass']},3.vue组件引入&lt;style lang="scss...

问题描述：前端需要修改restful API的url，但是打包之后，配置文件找不到了，如果在npm run build 生成dist后，这个配置也被写死了，传到运行的前端服务器上后，假设某次，api服务器的ip修改了，改动只是更新下这个url，但是却需要会到前端源码，url后，在重新npm run build,然后再把整个dist再重新传到前端服务器，才可以。解决方法：用了genera...

我们在做手机端项目的时候，肯定想能让项目在真机上快速方便的访问，而不是等着服务端发版才能访问到，那么如何实现呢？那么我们只需要在package.json的dev进行配置--host 0.0.0.0，然后要看你webpack-dev-server起服务的host的ip，比如webpack-dev-server的ip是192.168.1.1，那手机端就访问192.168.1.1:8080即可。...

{ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') }},以...

entry:入口output:出口resolve://自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名extensions: ['', '.js', '.json', '.scss','vue'],//模块别名定义，方便后续直接引用别名，无须多写长长的地址alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('sr...

三个配置文件 webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js来分别用以实现项目打包的基础模式、开发模式以及生产模式的应用 生产模式：webpack.prod.config.jsconst webpack = require('webpack');const HtmlWebpackPlug...

我做过，一个项目。打包时间垃圾到爆。20多分钟Webpack 默认提供的 UglifyJS 插件，由于采用单线程压缩，速度颇慢 ；推荐采用webpack-parallel-uglify-plugin插件，它可以并行运行 UglifyJS 插件，更加充分而合理的使用 CPU 资源，这可以大大减少的构建时间；当然，该插件应用于生产环境而非开发环境。然后后期我们就用了webpack-parall...

历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。在 ES6 之前，社区制定了一些模块加载方案，最主...

之前安装创建react也出现过类似的报错问题，那么如何解决呢？ 如果遇到这种问题，那么经常是权限问题 。没有权限，导致全局安装vue脚手架不能成功 window+x 以管理员身份打开 ，继续安装。可以用vue -V查看版本，来检测是否安装成功。   ...

首先要全局安装vue-cli  (如果遇到错误，请参考我的另一篇博客https://blog.youkuaiyun.com/xiasohuai/article/details/86757003)npm install -g @vue/cli 1.创建初始化项目vue create vue-cli3-project2.选择一个预设可以选择默认预设，默认预设包含了babel,esl...

npm install module_name -S 即 npm install module_name --save 写入dependenciesnpm install module_name -D 即 npm install module_name --save-dev 写入devDependenciesnpm install module_name -g...

安装vue,vue-clivue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。在安装vue之前，先确保node和npm是否安装。如果安装ok，那么接下来安装vue1.npm install vue(安装vue)2.npm install --global vue-cli（安装vue-cli）因为npm是国...

vue-cli2的时候是在build文件下面的webpack.prod.conf.js中配置的，vue-cli3文件结构有所不同，是在项目目录下的vue.config.js文件里面配置。1.首先要安装插件uglifyjs-webpack-pluginnpm install uglifyjs-webpack-plugin --save2.在webpack.prod.conf.js或者...

项目中，当组件文件过多，webpack-dev-server 编译时，容易内存溢出，如何解决呢？ windows下在 \node_modules\.bin\webpack-dev-server.cmd 加以下红色配置，暂可解决@IF EXIST "%~dp0\node.exe" ( "%~dp0\node.exe" "--max_old_space_size=4096" "...