分类：Vue-CLI3

2020
10-28

vue-cli3配置favicon.ico和title的流程

一、如果是单页面程序public目录下有个index.html和favicon.icoico的路径二、如果是多页面程序publc目录下放ico图标public下的index页面然后在vue.config.js里的page配置ico的路径补充知识：Vue-cli3的favicon修改不了在vue.config.js中配置下如下代码，重跑下项目就行了//以下是pwa配置pwa:{iconPaths:{favicon32:'faviconfc.ico',favicon16:'faviconfc.ico',appleTouchIcon:'faviconfc.ico',... 继续阅读 >

2020
10-23

vue-cli3自动消除console.log()的调试信息方式

在vue-cli3里面已经有这个功能了，只需要开启这个功能就行了，默认是关闭的1、找到生产环境的配置文件2、然后找到UglifyJsPlugin这个插件添加一行代码补充知识：Vuecli3实现去除console.log去除控制台输出下载移除控制台输出的包npminstallbabel-plugin-transform-remove-console--save-dev新建babel.config.jsletplugins=[vant插件的按需加载['import',{libraryName:'vant',libraryDirectory:'es',style:... 继续阅读 >

2020
10-10

vue-cli3 热更新配置操作

问题：在使用vue-cli3搭建项目之后，发现修改.vue文件里面的内容之后，页面不会自动刷新。解决方案：只需要在vue.config.js文件中配置一下就可以实现热更新了，如下：chainWebpack:config=>{//修复HMRconfig.resolve.symlinks(true);},是的就是这么简单。修改一下标签里面的内容，ok可以自动更新。开森！！！好像有点开心的太早，修改css部分的内容并没有自动更新，原来的vue.config.js中的css配置搞的鬼。在css的相关配置... 继续阅读 >

2020
10-10

vue-cli3项目配置eslint代码规范的完整步骤

前言最近接手了一个项目，由于之前为了快速开发，没有做代码检查。为了使得代码更加规范以及更易读，所以就要eslint上场了。安装依赖安装依赖有两种方法：在cmd中打上把相应的依赖加到devDependencies下，再npminstall对应依赖。在package.json文件加上相应依赖："eslint-plugin-html":"^6.0.3","@vue/cli-plugin-eslint":"^3.3.0","@vue/eslint-config-standard":"^4.0.0","eslint":"5.0.0","eslint-friendly-formatte... 继续阅读 >

2020
10-10

全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作

官方链接：https://cli.vuejs.org/zh/guide/installation.html1.安装Vuecli3关于旧版本VueCLI的包名称由vue-cli改成了@vue/cli。如果你已经全局安装了旧版本的vue-cli(1.x或2.x)，你需要先通过npmuninstallvue-cli-g或yarnglobalremovevue-cli卸载它。Node版本要求VueCLI需要Node.js8.9或更高版本(推荐8.11.0+)。你可以使用nvm或nvm-windows在同一台电脑中管理多个Node版本。可以使用下列任一命... 继续阅读 >

2020
10-10

vue-cli3中配置alias和打包加hash值操作

1.之前在项目测试环境打包的时候，js文件打包出来没有hash值，但是生产环境打包出来却又hash值当时只配置了filenameHashing:true，这样是不够的后来在chainWebpack中配置config.output.filename('[name].[hash].js').end()，解决了该问题2.配置alias可以在引入文件的时候不用写很长的相对路径步骤：先引入path模块constpath=require('path')functionresolve(dir){returnpath.join(__dirname,dir)}之后在chainWebpack中... 继续阅读 >

2020
10-10

vue-cli3访问public文件夹静态资源报错的解决方式

今天在项目中使用了public文件夹里的静态资源，在本地测试没有发现问题，但是项目部署到fat服务器却报了404错误。我发现原因在于我的项目没有部署在域名的根部，而我引用public文件是通过绝对路径方式引用的，因为就出现了路径错误。路径如下：<img:src="`/image1.png`">在官网文档中发现这种情况需要为URL配置publicPath前缀：process.env.BASE_URL正确的引用路径是：<img:src="`${process.env.BASE_URL}image1.png`">当然... 继续阅读 >

2020
10-10

关于vue-cli3打包代码后白屏的解决方案

前言：最近使用了vue-cli3.0开发了一个移动网页端项目，准备打包发布了。按照以往的流程npmrunbuild问题来了打开distindex.html文件发现白屏。打开调试后发现文件引用路径不对根据以往的经验根目录下新建vue.config.js配置publicPathmodule.exports={...runtimeCompiler:true,publicPath:'./'...}满心欢喜的打开，结果还是白屏。打开调试发现文件路径是正确的，这就唧唧了！！。发现问题各种百度。发现了... 继续阅读 >

2020
10-09

vue-cli3 引入 font-awesome的操作

在package.json添加"font-awesome":"^4.7.0"执行npminstall在main.js引入//fontimport"font-awesome/css/font-awesome.min.css"补充知识：在Vue2.0中引入font-awesome，并在Element-ui中正确显示font-awesome的icon如下所示：npminstallfont-awesome--save在main.js中引入import'font-awesome/css/font-awesome.css'在App.vue的[class^="el-icon-fa"],[class*="el-icon-fa"]{display:inline-block;font:norm... 继续阅读 >

2020
10-08

浅谈在vue-cli3项目中解决动态引入图片img404的问题

博主最近手头再做一个项目，需要调用天气接口，并且还要动态显示天气相关图片icon。本来以为没什么大问题，结果硬生生被这个动态图片路径搞得民不聊生（博主还是tooyoung，toosimple~），给出效果图：就是那个红框选中的那个天气状况图标icon要根据当前城市获取当前城市天气状态码，再根据当前城市状态码找到这个对应的天气图标icon~~按照一般的开发模式，静态图片路径是相对路径还是绝对路径都可以，因为图片路径是静态的是死... 继续阅读 >

2020
10-08

在vue-cli3中使用axios获取本地json操作

在vue-cli3中，公共文件夹由static变成了public先把要访问的json放到public文件夹下使用axios的get方法获取，不能用post，不然会报404axios.get(`./china-main-city/100000.json`).then((data)=>{console.log(data)})补充知识：两个不同的路由，引入相同的组件从不同的按钮进入到详情页,两个不同的路由,相同的组件主要是从不同按钮进入不同路由的页面,内容一致,但是title不一样,怎么写index.jsconstbusinessDet... 继续阅读 >

2020
10-08

Vue-CLI 3 scp2自动部署项目至服务器的方法

一安装scp2npminstallscp2--save-dev二、配置测试/生产环境服务器SSH远程登陆账号信息在项目根目录下,创建.env.dev文件(测试环境变量)VUE_APP_SERVER_ID变量表示当前需部署的测试服务器ID为0//.env.dev文件中VUE_APP_SERVER_ID=0在项目根目录下,创建.env.prod文件(生产环境变量)VUE_APP_SERVER_ID变量表示当前需部署的生产服务器ID为1//.env.prod文件中VUE_APP_SERVER_ID=1在项目根目录下,创建yirenck/products... 继续阅读 >

2020
09-27

谈谈我在vue-cli3中用预渲染遇到的坑

前言在开发自己的个人网站的时候后，选择了用vue来开发，不可避免的遇到要对seo做优化。鉴于目前页面也不多，因此首先采用的是预渲染的方式。本来以为把插件一装，配置一配，咔咔咔就能搞定，结果发现并没有想的那么简单。因为首先就遇到了两个报错，折腾了半个晚上。问题及解决方案第一个报错：Unabletoprerenderallroutes!这个问题是在设置好配置之后，build的时候报出来的。主要症状就是打开了浏览器后卡主不动，然后就强制... 继续阅读 >

2020
09-25

vue-cli3单页构建大型项目方案

一、vue-cli3单页面构建方案1、在目标文件夹内执行vueui;一个ui版界面，用于创建vue项目；2、打开router文件夹内的index，看情况配置router的模式，是默认的hash还是history？ps:个人推介history模式，因为内嵌如app的H5页面的话，有可能某些app是不允许页面上带有'#'的，而hash会在url上利用#来做路由转发。ps:history模式在发布到服务器上需要nginx配置一下。详情请自行百度。constrouter=newVueRouter({base:'/',mode... 继续阅读 >

2020
09-24

Vue-cli3多页面配置详解

Vue-cli3发布已经好长时间了，笔者也在一直使用，由于公司业务需要要使用多页面配置，于是花时间研究了一下Vue-cli3如何配置多页面。由于Vue-cli3相比之前的版本做了很大的改动，在研究过程中也遇到一些问题。对于Vue-cli3创建项目这里就不做太多的赘述了，毕竟不属于本文内容，有关相关博客也有很多，大家可以自行Google一下就好了。多页面应用(mpa)与单页面应用(spa)优缺点在项目中我们用到的大多数都是单页面应用(spa)，对于多... 继续阅读 >

2020
09-24

vue-cli3使用mock数据的方法分析

本文实例讲述了vue-cli3使用mock数据的方法。分享给大家供大家参考，具体如下：在前后端分离的开发模式中，后端给前端提供一个接口，由前端向后端发请求，得到数据后前端进行渲染。由于前后端开发进度的不统一，前端往往使用本地的测试数据进行数据渲染的测试。正文开始在vue-cli构建的项目，我们可以借助devServer开启一个服务，然后我们可以通过路由模拟一个接口来进行测试。在vue-cli2和vue-cli3中的配置方式是不同的。下面分别... 继续阅读 >