vue cli4 全局scss变量技巧

默认情况vue的build打包，都是基于根路径来进行的，但是，如果我们将打包的文件放置再二级目录，就会导致文件无法加载，页面空白。原因有两个：路由路径无法正确匹配资源文件路径错误下面我们就来讲讲做法路由配置在路由实例的创建时，我们常常会看到一个base选项，内容如下：const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes })base官方有很明确是解释：类型: string 默认值: "/"应用的基路径。例如，如果整个单页应用服务在 /app/ 下...

前言为了兼容之前的旧浏览器版本，特别是安卓4.4这种低版本，transform是一定得增加浏览器前缀的，但是我在项目中遇到了设置无效的问题，极度蛋疼，下面是我的解决教程，当然没这个问题，看这篇文章，相信你对如果给项目增加浏览器前缀，会有很充分的认识。教程给css增加浏览器前缀，业界的做法就是使用postcss，目前webpack与vue cli他们需要安装的依赖略有不同：webpack：pnpm i postcss postcss-loader autoprefixer -D添加对应的rules{ test: /.s?css$/, use: [ ...省略...

尽量少用全局变量全局变量污染是一个老生常谈的问题，在es5时代常见的做法就是使用函数作用域隔离，es6时const、let出现，我们还可以直接在块级作用域中声明。相对于使用，我们通过一些代码来回顾一下全局变量污染所带来的问题。全局作用域中是存在this的，this就等于window，只是浏览器为了方便，用window来表示全局对象本身。function sum(x, y) { result = x + y; return result; } console.log(result); //Uncaught ReferenceError: result is not def...

webpack会解析路由文件的引入，就算你是一个setTimeout输出的路由配置文件，或者if else判断的路由配置文件，他都会将你明文书写的路由vue文件打包。为什么？其原理未知，估计并不是解析代码，而且代码关键字的抓取。如果你是一个api返回的路由配置，webpack的无法准确感知到路由文件的是否被引入，所以它的办法是全部都打包，src目录下的所有vue文件全部会被打包成chunk-2d0b30b7.3576daad.js这种格式的文件。其中包裹components目录下的组件，哪怕你的这个组件已经被某个路由页明确引入了，这个路由除了会被打包到这个路由页，还会生成单独的chunk...

发现公司的项目，不管是vue2还是vue3，不管是新创建的还是旧项目，启动后Network永远是unavailable；就很离谱，导致每次想要局域网测试，只能手动在devServer中配置public属性，设置一个固定的本地ip地址。但是，你的ip地址并不是别人的ip地址，那么就会导致如果不小心上传了vue.config.js；那么同事一拉，哦吼，不懂得就说，哎呀，我的项目怎么启动不了了。这就很蛋疼了，所以我分析了一下这个问题的原因。首先，我的电脑的环境是没有问题的，网卡也是没有问题的，vue cli早就支持多个网卡了，所以多网卡问题就可以忽略。其实主要原因是因为一个不合法的ipv4地址...

费了半天劲才搞懂了，scss的函数代码写的是真累啊，而且不知道为啥我的代码格式化会给我自动换一行，导致极度不美观。//生成margin和padding $multiplier:4; //乘数 $dimensions:("p":"padding", "m":"margin"); //方向 $directions:("t":"top", "b":"bottom", "l":"left", &qu...

在默认初始化好的vue cli项目，public目录下的index.html文件，他的title使用的是一种ejs语法：<title><%= htmlWebpackPlugin.options.title %></title>接收的是htmlWebpackPlugin对象上，options的title。一般情况，省事一点，直接把这个title给改成静态就完事了！<title>静态标题</title>但是，好像少了点什么，能不能不改动这个就能改标题呢？当然是可以的，我们需要配置下vue.config.jsvue.config.js...

莫名其妙就提示css冲突和顺序问题，而且组件里面的样式和class类名完全不相干，不知道怎么就给你冲突了。顺序都有点莫名其妙，这玩意谁先谁后都无所谓啊。看了好半天github上的issues也没有谁说出个所以然，反正就是大量的警告，18年就有人提出这个问题了，唉，头疼issues目前普遍的解决办法就是忽略这个警告，因为不是真的影响代码的运行。忽略警告打开vue.config.js文件夹，插入以下代码：module.exports = { css: { extract: { ignoreOrder: true }, }, }保存，然后重新打包，不会再提示 冲突和顺序问题了

因为有这个需求，所以分享出来，省的百度找到的都是一堆垃圾文章。vue.config.js配置一个属性即可module.exports = { //指定输出路径 outputDir: 'build/dist' }outputDir配置输出的路径，默认是dist，我打包后文件输出到当前目录（vue.config.js相对）下的build目录下的dist文件夹

今天遇到这么一个需求，官网的个别页面需要新建页面打开，但是这个页面我是配置的路由。一直以来，我以为路由的跳转只能就是在当前页面进行，特别是我跳转路由使用的都是路由name属性。接到这个请求我有点懵逼了，哈哈。。解决方法router-link元素默认生成的是一个a元素，仔细查看你会发现a元素的href是带有路径链接的，哪怕你跳转的:to="{name:xxx}"使用的是路由name。它最终生成的a元素，href依旧是路由的path，所以，既然他能生成路径，那么我们只需要给他加上a元素的attr属性target即可。<router-link :to="{n...