vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就会使路径错误: 解决办法: 办法一: 把不需要编译的东西,直接放在static文件下,css引用的时候直接写相对路径: 具体原因看:https://segmentfault.com/q/1010000009842688(大致是static文件夹下的东西不会经过编译) 办法二:进行wepack配置:…

cli2版本: 将 config/index.js 里的 assetsPublicPath 的值改为 './' . build: { ... assetsPublicPath: './', ... } cli3版本: 在根目录下新建 vue.config.js 文件,然后加上以下内容:(如果已经有此文件就直接修改) module.exports = { publicPath: '', // 相对于 HTML 页面(目录相同) } 参考链接: 1. vue打包静态资源路径不正确的解决办法 2. V…

介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发. 一个运行时依赖 (@vue/cli-service) 一个开发环境依赖,局部安装在每个 @vue/cli 创建的项目中. 可升级 ? 基于 webpack 构建,并带有合理的默认配置: 可以通过项目内的配置文件进行配置: 可以通过插件进行扩展.-- cli 插件是用来给 we…

这段时间公司新项目立项,开发组选用 Vue2.0 进行开发.当然也就一并用到 vue cli 进行自动化构建.结果在基础版本开发完成后,用 npm run build 命令打包上线时,发现以下几个问题.虽然这些问题对项目正常运行影响不大,但是却对性能影响比较大. 1.加载图片过多,过大时,加载缓慢: 2.部署包过大,上传缓慢: 本来想偷个懒,优化的事放到以后再说,但是每次上传服务器,包太大自己都感觉不爽.所以索性先优化了再说! 1.加载图片过多,过大时,加载缓慢: 原因: 解决方案: 2.部署包…

一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习惯进行调整.因此在后面几章的学习中,我将会在整个项目基础上,按照自己的需求进行修改设定. PS:因为毕竟自己还是传统意义上的后端开发,所以这里最终搭建完成的前端项目模板,其实是按照 PanJiaChen 开源的 vue-admin-template 模板进行修改仿写,所以你可以把这个系列后续的文章当…

1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道门槛,会报错XMLHTTPRequest can not load http://40.00.100.100:3002/. Response to preflight request doesn’t pass access control…. 为什么跨域同源非同源自己去查吧,在webpack配置一下…

vue cli 3 打包命令 npm run build,这种情况下的打包可以通过设置 vue.config.js里面的 productionSourceMap: false. 如果是自己设置的打包环境,可以将每一个环境的NODE_ENV设置成 'production' 模式.然后你的包就会很小了…

场景,公司的一个小型项目,需同时支持移动端和PC端.最开始考虑做两个独立的项目.但后来考虑到总共只有4个功能页面,布署起来相对麻烦.所以决定做在一个项目里. 1.升级vue-cli到4.x npm install -g @vue/cli 2.项目创建 vue create multipage 项目配置不做描述,这里选了node_sass, babel, router, vuex 3.安装element-ui和mint-ui npm install element-ui npm install m…

报错原因:静态资源丢失 解决方案 官方文档https://cli.vuejs.org/zh/config/#vue-config-js baseUrl 从 Vue CLI 3.3 起已弃用,请使用publicPath. 在根目录创建vue.config.js 文件 // 请把代码文本粘贴到下方(请勿用图片代替代码) module.exports = {     publicPath: './' } 重新用 npm run build 打包项目部署到服务器…

vue 打包优化 路由按需加载 通过vue写的单页应用时,可能会有很多的路由引入.当打包构建的时候,javascript包会变得非常大,影响加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应的组件,这样就更加高效了.这样会大大提高首屏显示的速度. const Home = () => import( './Home.vue') const router = new VueRouter({ routes: [ { path: '/home', componen…

@vue/cli 3 封装了 webpack.config.js,一般都在 vue.config.js 里面配置,官网不推荐在 webpack 的 output 处理,这里踩了一下坑,希望可以帮到后面遇到的小伙伴. vue.config.js module.exports = { // 这里是配置上线读取当前目录,默认是根路径,如 /js, /css 等,具体根据项目来 baseUrl: process.env.NODE_ENV === 'production' ? './' : '/', //…

vue.js是一个比较流行的前端框架,与react.js.angular.js相比来说,vue.js入手曲线更加流畅,不管掌握多少都可以快速上手.但是单页面应用也都有其弊病,有时候首屏加载慢的让人捏舌.今天我们以vue cli3.x来说一说如何行之有效的缓解此问题! 方法一 路由懒加载 首屏加载慢的原因无非就是单页面应用需要加载完整个路由表上的页面,而路由懒加载就是来解决这个问题的.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了.下面这个…

在做vue项目和react项目时,都用到了webpack.webpack帮助我们很好地提高了工作效率,但是一直以来没有对其原理进行探究,略有遗憾. 因为使用一个工具,能够深入了解其原理才能更好地使用. 这篇文章将大致分为三个部分进行解读: webpack打包简单介绍 输入webpack后发生了什么,整个运行机制大致是怎样的? 如何理解打包出的bundle.js? 如何实现一个简单的webpack打包工具? 打包优化 第一部分: webpack打包简单介绍    当一个项目使用webpack打包时…

1.为什么要对 Vue CLI 进行大规模修改? 尤雨溪认为旧版本的 Vue CLI 本质上只是从 GitHub 拉取模版,这种拉模版的方式有几个问题: (1) 在单个模版里面同时支持太多选项会导致模版本身变得极其复杂和难以维护,而提供多个模版一方面会让初学者无所适从,另一方面模版之间也难以共享功能或是互相迁移.CLI 3 对此的解决方案是通过插件的形式去支持多个不同的功能,一个插件对应一个功能(比如单元测试),这样即避免了多个模版,也使得 CLI 自身的可维护性得到提升.同时,支持第三方插件,…

webpack4 released 已经有一段时间了,插件系统趋于平稳,适逢对webpack3的打包速度很不满意,因此决定将当前在做的项目进行升级,正好也实践一下webpack4. 新特性 0配置 应该是parcel出来以后,webpack团队意识到其配置确实有点复杂,不太容易上手.so, webapck4 开始支持0配置启动.不过,万变不离其宗,webpack4的0配置也只是支持了默认entry 和 output而已,即默认entry为./src,默认output为/dist. 模式选择mod…

以下方式基于 @vue/cli 快速搭建的交互式项目脚手架 1. 路由懒加载 当打包构建应用时,JavaScript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载. import Vue from 'vue' import Router from 'vue-router' import store from './sto…

谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝座的 Gulp, 以及独树一帜的 fis3, 以及下一代打包神器 Rollup :在 browserify,grunt,gulp,rollup,webpack 可以一窥其中部分对比.在本文要探究的是,当前打包工具绝对霸者 Webpack. Webpack Package optimization W…

一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题.与此同时,它也为每个工具提供了调整配置的灵活性. CLI的全拼是Command-Line Interface, 命令行界面, 俗称脚手架 它是一个专门为单页面应用快速搭建繁杂的脚手架,可以轻松的创建新的…

目录 手动实现一个vue cli 1. 思考准备 2. 我们组织源码将会放在名为src的目录,webpack 打包需要一个入口文件,我们取作 main.js 3. 先预想以下会用到哪些基本依赖,第一个容易想到的是Vue, 然后是我们假设项目需要使用elementUI , 还有axios ,先就这些: 4. 我们的目标是要把src 中的从main.js 开始去编译-打包,到dist 文件夹中去, 所以我们需要配置文件,进行配置. 所以创建webpack 的配置文件, webpack.config.…

VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服务端渲染. 1.概述 官方文档 服务端渲染的配置相比预渲染就复杂多了,要做到同构,还要保证服务端和客服端的组件状态一致,我们需要对整个项目进行改造.大部分的内容官方文档中都说明的比较清楚,这里就不重复讲述了,需要各位花费一些时间照着文档一步步改造项目. 本人一开始也是这样照着文档做的,但是改造到最后…

之前我们推送了一篇小型Web项目打包优化文章,(链接),我们使用了一段时间, 在这过程中我们也一直在思考, 怎么能把结构做的更好.于是我们改造了一版, 把可以改进的地方和可能会出现的问题, 在这一版中进行了优化.小伙伴们, 有没有迫不及待? 那好, 我们废话少说, 进入正题^_^ 一.背景 之前, 转转App端内有些Hybrid页面和一些端外的落地页, 一般是单个的一两个小页面, 不是所谓的大型的前端应用, 比较零散, 交互也比较简单.如果用vue或react, 有点杀鸡焉用宰牛刀的意思, 没有…

未进行打包优化的痛点: 随着项目的不断扩大,引入的第三方库会越来越多,我们每次build的时候会对所有的文件进行打包,耗时必定很长,不利于日常开发. 解决思路: 第三方库我们只是引入到项目里来,一般不会经常性的去修改源码,一般都是在src目录下编写业务代码,因此可以把第三方依赖和src分开打包. 每次build的时候我们只需要把之前build好的第三方依赖文件引入到项目中即可,避免了我们每次build的时候都会build第三方依赖. 当第三方依赖发生改变的时候我们只需要把第三方依赖再build一…

github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. https://github.com/nusr/resume-vue 1. vue-router 不要开启 history 模式 路径中的 # 比较丑,就开启了 vue-router 的 history 模式,去掉了 #.平时做项目也是默认开启 history 模式.折腾了半天发现,我这是部署到 g…

陆陆续续也用vue开发或重构了不少项目,在这期间遇到不少的坑,也尝试过优化.在此记录一下,想到一点算一点吧: 一.尽可能的减少watcher的数量   当监听数据是一个对象的时候,最好具体到监听对象的属性: 二.渲染 1.可以用懒加载.分页.滚动加载或者tab方式去展示其他内容,减少每次渲染的数量:     2.结合v-if,异步显示dom结构,减少不必要组件的加载: 3.hybird开发的app,可通过app框架预加载的方式,将单页应用的资源提前缓存. 三.key值 给列表渲染加上唯一的key…

  因为公司项目要用vue框架,所以会用vue-cli来新建项目.用过vue的都知道,要全局安装vue以及脚手架vue-cli,然后执行vue init webpack projectname来新建vue项目模板.但是最近新建项目的时候发现,即使是在本机全局安装了vue最新版本2.5.17,可是用vue-cli脚手架创建vue项目木板的时候发现,vue的版本还是2.5.2版本.查过官方文档之后了解到,vue-cli有最新版本,需要重新安装,而且新建项目的方式也有所不同.这篇文章将针对vue以及v…

1.环境准备 安装node,npm,@vue/cli 2.初始化项目 用@vue/cli创建新项目 vue create mtest-ui 删除public,main.js,App.vue等无关文件,新增packages文件夹存放自己的vue组件 这里我写了一个actionsheet的vue组件放到packages文件夹中 并且在src目录中新增了个js,目录像这样: 其中lib目录是后续打包生成的先不用管 其中index.js是为了把packages中的组件提供一个统一入口来import 代码…

[问题背景] 用Vue clie 3.0的搭建得框架把我坑死了,在打包后,调用不到静态资源js,css,mp3等 [问题原因] vue cli 3.0打包后,dist目录下没有static目录,而Django那边的静态资源配置只认static,其他目录好像没用 [解决方法] 现在Django项目setting.py里面检查静态文件的配置 然后再去前端目录找到vue cli 3.0的配置文件,这里有个坑就是,vue cli 3.0的已经没有config目录,配置文件需要手动添加,如果没有vue.c…

@vue/cli  是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli   基于node服务  需要8.9以上版本 可以使用 nvm等工具来控制node版本  构建于 webpack 和 webpack-dev-server 之上 安装   如果已安装旧版 需要先卸载旧版本 : npm uninstall vue-cli -g //or yarn global remove vue-cli 任一命令安装全局新包: npm install -g @vue/cli //or yar…

翻译文档 文档翻译全貌 前言 之前写了一篇Vue CLI 3.x 版本的简单体验,当时文档还不全,具体的使用方法并不是很清楚,大概是2月7号,收到Vue CLI 3接近Beta版的提示,作者尤雨溪也讲下周会出文档,没想到昨天已经出来了.本着对新功能的好奇心,花了一晚上浏览并翻译了一下文档. 如今最大的变化在配置方面,变成了一种独立配置文件的形式.同时集成了很多功能,整个Vue CLI更像一个系统,功能的扩展使用插件的形式向系统中自定义注入. 同时,新的文档将开发中的注意事项也列出来了很多,阅读一…

前言:之前在网上找的好多都是基于vue-cli 2.x的,而使用vue-cli 3的文章比较少,Vue CLI 3 中文文档,所以我在自己尝试的时候把几篇文章结合了一下,调出来了我想要的模式,也就是Vue CLI 3 + element-ui + 多个二次封装的组件.最终想要的是 element-ui 这种感觉的,很多组件可以在不同项目中复用. 安装依赖 首先用Vue CLI 3来初始化项目 yarn global add @vue/cli vue create qiyun-el-ui vue…