分类 vue cli 下的文章

木灵鱼儿 2年前 vue cli

vue cli3-cli4 打包后项目在二级路径的方法

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

4581 0 0

vue cli 打包二级目录

vue cli异步路由加载原理

木灵鱼儿 2年前 vue cli

vue cli异步路由加载原理

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

2314 0 0

vue cli 异步加载路由

关于 vue cli 的Network unavailable的问题分析以及修复方式

木灵鱼儿 2年前 vue cli

关于 vue cli 的Network unavailable的问题分析以及修复方式

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

5938 5 0

vue cli Network unavailable

关于 vue cli 的Network unavailable的问题分析以及修复方式

vue cli4 修改静态html的 %= htmlWebpackPlugin.options.title % 默认值

木灵鱼儿 3年前 vue cli

vue cli4 修改静态html的 %= htmlWebpackPlugin.options.title % 默认值

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

5421 0 0

vue cli 修改title

vue cli4 全局scss变量技巧

木灵鱼儿 3年前 vue cli

vue cli4 全局scss变量技巧

今天啃了下官方文档，加上之前也配置到webpack的，有一些经验，我觉得官方可能有对应的方式，毕竟在webpack中我们只需要在sass-loader配置中就可以加入全局scss了，都不用安装啥插件。于是乎，果然，官方有，但是文档很蛋疼，你能看懂引入单个全局，没有多个全局的示例，索性自己写个笔记了。vue.config.jsmodule.exports = { css: { loaderOptions: { scss: { prependData: ` @import "~@/base/assets/scss/glob...

2689 0 0

scss vue cli 全局变量

分类：vue cli

vue cli3-cli4 打包后项目在二级路径的方法

vue cli异步路由加载原理

关于 vue cli 的Network unavailable的问题分析以及修复方式

vue cli4 修改静态html的 %= htmlWebpackPlugin.options.title % 默认值

vue cli4 全局scss变量技巧

最近评论

博客文章RSS订阅

博客评论RSS订阅

登录

分类：vue cli

vue cli3-cli4 打包后项目在二级路径的方法

vue cli异步路由加载原理

关于 vue cli 的Network unavailable的问题分析以及修复方式

vue cli4 修改静态html的 %= htmlWebpackPlugin.options.title % 默认值

vue cli4 全局scss变量技巧

最近评论

博客文章RSS订阅

博客评论RSS订阅