皮皮网

1.公司用vue还用原生吗(大公司很少用vue)
2.一次vue-cli4项目升级到vite的源码经历
3.vuecli和webpack什么关系(vuecli和@vuecli)
4.vuecliservice不是内部命令？
5.Vue修改默认启动端口的几种方法

公司用vue还用原生吗(大公司很少用vue)

       vue打包成app跟原生APP对比

       webapp项目已经通过vue-cli搭建的脚手架写好了，然后通过webpack打包成一个部署文件list，如下：打开HBulider，打开目录，选择这个list，项目名称自己更改。

       vue和uni-app的区别如下：uni-app可以通过打包实现一套代码多端运行，而vue不行。uni-app有自动的框架预载，加载页面的速度更快，vue没有。uniapp使用小程序的标签，vue使用web端的标签。

       å¯ä»¥çš„呢，通过第三方的混合开发工具都可以把这个打包做成APP。

       åœ¨App端，如果使用vue页面，则使用webview渲染。如果使用nvue页面（nativevue的缩写），则使用原生渲染。一个App中可以同时使用两种页面，比如首页使用nvue，二级页使用vue页面，hellouniapp示例就是如此。

       è¿™ç§æƒ…况原因如下：根据查询中国编程网信息显示，vue的template编译器，vue将template编译成了renderfunction，使得在浏览器中无需解析template字符串，这大幅度减小了vue打包后的体积。

       ä¸ºä»€ä¹ˆå¤§å…¬å¸å¾ˆå°‘用vue?

       1、如果这家公司告诉你，他们就只会用Vue，你要小心了，因为：这种公司一定充斥着各种前端小白，这些人没用过其它任何框架，甚至连快速学习一门新的编程语言都有困难，但是这不妨碍他们操起键盘出来胡说八道。

       2、不是不用，也不是Vue驾驭不了，而是Vuex不是最优解方案。Vuex的OptionsAPI随着项目的规模和复杂性的增长，维护的成本增加、阅读成本翻倍、又没有一种很好的逻辑复用方式、面条式代码无法避免。

       3、因为Vue是一个基于JavaScript的框架，它的特性包括框架的简单性，易于集成，用户友好性，较少的限制，这些原因已经帮助Vue与Angular和React竞争。

       4、用户体验不够好不管做产品还是做服务，做硬件还是做软件，是在互联网还是传统行业，最核心比拼的是用户体验。

       5、部门之间的协调效率上，因为大型项目不是一两个人，三五个人能够完成的。一个项目之所以称为大项目是在于它是公司大量部门协同合作下的产物。也就是说，解决了项目划分等问题，使用vue和react都是可以的。

       6、国内用vue开发项目的特别多，毕竟用vue上手快，开发成本低。

电商后台管理系统的前端技术栈---vue

       1、该项目主要是一个电商的后台管理系统，可实现管理用户账号，即登录、退出、用户管理、权限管理等，商品管理，即商品分类、分类参数、商品信息，订单信息等以及数据统计。

       2、电商管理平台主要使用vue的Web技术对其进行研究设计与实现，旨在更加高效、便捷地管理后台传入的数据，且能够帮助使用者更好地进行用户，商品以及订单管理。

       3、Vue.js是一套构建用户界面的渐进式框架，Vue采用自下向上增量开发的设计，其核心库只关注视图层，易于上手，同时vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

       4、想要将前端Vue+后台管理系统上线，需要以下步骤：将前端Vue程序打包为静态文件，使用npm或yarn运行命令：npmrunbuild或yarnbuild。在你的服务器上，可以使用FTP或SCP等工具将静态文件上传到服务器。

       5、uni-app：uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

为什么没有人开发vue转原生

       è¿™ç§å…¬å¸çš„技术负责人很可能是个小白，至少是个盲目的跟风者。他自己是不会去研究技术的，听别人忽悠就好了。你去帮这种人做事，注定是不断填坑的命运。这种公司一定没有规范的开发流程，可能连CI系统都没有。

       å¯¹äºŽåˆ›ä¸šå…¬å¸ä¸€èˆ¬èµ·æ­¥çš„产品都是信息类（比如知乎、微博、商城类，并没有太多对底层硬件的依赖的应用）的ios+安卓客户。

       å¯ä»¥çš„呢，通过第三方的混合开发工具都可以把这个打包做成APP。

       APP性能方面：原生App：能够与移动硬件设备的底层功能，比如个人信息，摄像头以及重力加速器等等。网站制作的App：只能使用有限的移动硬件设备功能。

       çŸ¥ååº¦ä½Žã€‚vue3用的人太少了是由于知名度低，vue3提供了更好的性能，更小的捆绑包体积，更好的TS集成，用于处理大规模用例的新API。0版本的vue，开发周期长达两年多。

       å¶å°”碰到HBuilder这个国人工具，能直接将WebApp（HTML+CSS+javascript），打包成原生安卓App，那就试试吧Web应用打包成手机App，重点考查：流畅程度功能完善度开发便捷度。。

大公司前端一般用vue还是react

       1、根据不同框架优点，我们在实际项目开发选型中一般中小型项目我们会选择使用Vue，大型项目会选择React。

       2、作为一个专业前端，建议前期学Vue，后期再学React；反之，如果之前直接学的React，则一般不需要再去学Vue了，做项目，选一个就行了。

       3、都用。vue和react在大公司中都很常用。年React巩固了它作为前端框架之王的地位，这一年中可以看到它在Web端和移动端的快速成长，同时稳稳领先于它的主要竞争对手Angular。

vue根据原生版本号进行版本控制

       1、vuecli改es版本通过以下两个步骤完成。卸载当前版本，使用命令npmuninstall-g@vue/cli即可。使用命令npmi-g@vue/cli@0.4安装es版本即可。

       2、在Vue路由系统中可以改变版本号，只需在项目的package.json文件中找到字段version，然后更改其值即可。

       3、此外，时间戳通常是以秒为单位，而版本号不能以秒为单位，因此需要做一些处理才能用时间戳当版本号。另外，用时间戳做版本号不利于版本控制和备份，因为时间戳可能会变化，这样就会对版本控制产生影响。

       4、vue：4，2vue-template-compiler：4，（注：如上所示版本号均为样例，具体实现请小伙伴们根据自己的版本号对应）然后执行：npmupdate就可以了。

       5、版本号在package.json里有，如果懒得看版本号就安装最新版，执行npminstallneo-async@latest（最新版可能与其他包不兼容，所有建议和package.json中保持一致）。另外install时，建议使用淘宝镜像，可以参考这篇文章。

       6、调研了很多框架和模式，最后自己东拼西凑搞出来了这么一个玩意。服务端毫无疑问使用node，使用typescript可以有效的在编码同时查错，强类型语言写服务端毫无压力。

一次vue-cli4项目升级到vite的经历

       背景

       使用vue-cli4的项目，业务写多了之后开发运行和打包都慢了很多，源码为了提升开发体验以及更新团队技术框架，源码需要升级到更高级的源码脚手架上，两种方案：一是源码升级到vue-cli5，二是源码把源码变为app升级到最新的vite。

       其中第一种方案升级简单，源码经过实验，源码打包的源码速度不升反慢，这可能和项目中的源码有依赖以及业务代码有关。

       第二种方案升级vite，源码经过可行性调查，源码升级到vite的源码成功率非常高，最后决定从vue-cli4升级到vite，源码这是源码一个高风险高回报的事情，因为尽管市面上已存在很多升级成功的案列，但是每个项目都不一样，我们的项目也很庞大，依赖很多，并没有%升级成功的把握。而升级成功的回报也很显而易见，开发环境几乎秒运行，开发体验得到了显著提升。

升级前后对比

       ||vue-cli4|vite||---|---|---||开发启动时间|ms|ms||生产打包时间|s|s||打包体积|.6MB|.6MB||运行期间同一代码改动编译时间|ms|瞬时|

       生产环境打包时间可能和我们项目中用到了太多vite插件有关系，但开发环境的提升非常显著。

项目状况

       项目中用到的Vue2，VueCli版本：4.5.，版本更新时间为.5.8，vueCli4的最后版本为4.5.(.3.)，依赖的cemc指标源码webpack版本为^4.0.0

       组件库使用vant，依赖Less预处理器，通过vue.config.js配置设置了less主题色，在webpack仅支持less-loader@5版本以及对应的less版本

       业务css预处理器为stylus:"^0..5"，对应stylus-loader:"^3.0.2"

       进行了多页打包（MPA）

       使用了workbox-webpack-plugin插件配置了PWA：WorkboxWebpackPlugin

       配置了多个路径映射（alias别名）

       指定了文件输出路径以及hash配置

       生产环境下关闭productionSourceMap以及css的sourceMap提升打包速度

       proxy开启多个代理

       用到了.env文件中的环境变量

       按照开发规范忽略部分文件后缀以及index.js

       移除了preload脚本

期望结果

       可以使用vite进行开发和打包

       仍保留webpack打包功能（因为项目太大，不能保证升级到vite后会不会有问题，所以仍希望webpack原本功能正常运行）

准备工作

       升级Node版本，vite只支持node及以上，建议升级到v以上。

       安装pnpm工具，pnpm作为更好的npm依赖管理工具，是目前npm和yarn的最好替代品，且有些依赖包使用npm安装时会有异常，使用pnpm安装可解决：pnpm

       小项目尝试一键转换升级：wp2vite、webpack-to-vite，这两个工具都提供了一键将webpack项目转成vite的能力，但对于大中型项目，并不可靠。

开始行动1.安装必要依赖pnpm?add?vite-plugin-env-compatible?vite-plugin-html?vite?vite-plugin-vue2?--dev

       vite-plugin-vue2是处理vue2版本代码的插件，如果项目中是vue3，安装的依赖有所不同，请参考webpack-to-vite

2.复制html到根目录，并修改 注意是复制，并只改动复制后的html，这样才不会破坏原有webpack功能。

       修改复制后的html，增加对应的js文件引用，注意type属性不能少！

<!--?忽略一些代码?--><body><div?id="app"></div>++?<script?type="module"?src="/src/main.js"></script>?++</body>

       多页打包(MPA)，其他页面的截流口令源码html同样操作，不同html引入对应的js即可。

3.新增vite.config.js文件，开始迁移最重要的配置部分

       空配置如下：

import?{ ?defineConfig?}?from?'vite'export?default?defineConfig({ })4.修改环境变量

       环境变量主要面临两个问题：

       要兼容webpack和vite的环境变量用法

       解决方法：使用vite插件vite-plugin-env-compatible，让vite中可以使用webpack中读取环境变量的方式，再配合envPrefix配置，让vite可以读取到VUE_APP_开头的环境变量：

?pnpm?add?vite-plugin-env-compatible?-D?import?{ ?defineConfig?}?from?'vite'?import?envCompatible?from?'vite-plugin-env-compatible'?export?default?defineConfig({ plugins:?[?envCompatible()],envPrefix:?['VUE_APP_']?//?很重要?})?//?mian.js测试?console.log(process.env.VUE_APP_UNION_STATS)?console.log(import.meta.env.VUE_APP_UNION_STATS)

       两个打印都得到了正确的结果，注意：vite中默认只能读取到VITE_开头的环境变量，如果不配置envPrefix，则会导致第二个打印为undefind。

       vite.config.js中不能读取到环境变量

       vite.config.js是无法直接通过import.meta.env和process.env获取环境变量的，我们需要通过vite的loadEnv获取。

       我们需要将vite.config.js的导出对象改为函数：

?import?{ ?defineConfig,loadEnv?}?from?'vite'?export?default?({ ?mode?})?=>?{ ?const?isPro?=?mode?===?'production'?//?我们可以通过mode直接判断当前是不是生产环境，注意mode可以在运行指令中指定：`vite?build?--mode?master`，如果没有指定，那默认打包就是production?function?getEnv(key)?{ ?//?定义获取环境变量的方法?return?loadEnv(mode,?process.cwd(),'')[key]?//?第三个参数非常重要，下面有详解?}?return?defineConfig({ ?base:?getEnv('VUE_APP_PUBLICPATH'),?//?读取环境变量?//?...忽略其他代码?})?})

       loadEnv有三个参数，前两个参数基本固定不变，而第三个参数默认情况下是不需要传的，只有在配置了envPrefix项，读取非VITE_开头的变量时才需要，在loadEnv源码中我们可以看到，第三个参数是prefixes:string|string[]='VITE_'，也就是环境变量的前缀，默认是VITE_。

       如果你的项目和我一样，读取了VUE_APP_PUBLICPATH这样非VITE_开头环境变量，就在loadEnv的第三个参数传递空字符串即可，这样就能读取到所有的环境变量了。

5.兼容commonjs代码

       项目中有用到commonjs规范的linux源码源依赖，比如letmd5=require('js-md5').create()，webpack是基于node开发的，支持require语法，在打包的时候webpack也会正确处理这部分代码，但在vite中不会，所以需要将这部分代码改成importmd5from'js-md5'

       项目开发环境下，一些node_modules中的包也会存在commonjs的代码，我们可以通过vite的插件?vite-plugin-commonjs来实现这部分代码的转化，保证开发环境的正常运行。

pnpm?add?@originjs/vite-plugin-commonjs?--dev//?vite.config.js?忽略其他代码import?{ ?viteCommonjs?}?from?'@originjs/vite-plugin-commonjs'export?default?({ ?mode?})?=>?{ return?defineConfig({ plugins:?[//?...viteCommonjs()?//?兼容vite中的cjs导入语法]})})6.解决css预处理的问题

       vite内置了对主流css预处理器的支持（sass/less/stylus），项目使用预处理器时，只需要安装对应预处理依赖即可：

#?.scss?and?.sasspnpm?add?sass?-D#?.lesspnpm?add?stylus?-D#?.styl?and?.styluspnpm?add?stylus?-D

       比较巧的是，我们项目中用到的Stylus的@import别名的语法和vite冲突，@import'~@/public/stylus/mixins'这样的代码是会报错，一开始我找到了插件，可以帮助我们解决这个问题：vite-plugin-stylus-alias，但是都后面打包的时候发现这个插件有副作用，后面采取了其他方法解决。

<!--?忽略一些代码?--><body><div?id="app"></div>++?<script?type="module"?src="/src/main.js"></script>?++</body>0<!--?忽略一些代码?--><body><div?id="app"></div>++?<script?type="module"?src="/src/main.js"></script>?++</body>1

       使用这个插件会导致无法生成sourcemap文件，在打包的时候可以看到警告：Sourcemapislikelytobeincorrect:aplugin(vite-plugin-stylus-alias)wasusedtotransformfiles,butdidn'tgenerateasourcemapforthetransformation.Consulttheplugindocumentationforhelp，鉴于插件作者已经很久没有更新，建议能改成相对路径还是直接改，如果引用地方较多，可以定义文件为全局styl文件最新解决方案：一般出现这个报错是因为插件使用了vite的transformapi转换代码，但是return值缺失导致，解决方法：复制插件代码到项目中，在插件transform函数return的结果中，返回map:null，然后再vite.config.js中引用项目中修改后的源码如何应用插件，即可完美解决，如下：文末解决bug有细说

<!--?忽略一些代码?--><body><div?id="app"></div>++?<script?type="module"?src="/src/main.js"></script>?++</body>2

       定义stylus全局文件

<!--?忽略一些代码?--><body><div?id="app"></div>++?<script?type="module"?src="/src/main.js"></script>?++</body>3

       这里需要注意，官方文档中css-preprocessoroptions写的是使用文件名拓展名作为key，stylus的文件拓展名是styl，但是我使用了stylus作为key并不会有问题，相反使用styl作为key则不生效了，后续这个地方可以留意一下。

       在vite源码中，stylus和styl都进行了判断，理论上都可以使用，但目前测试的结果就是styl作为key不生效，可能源码中其他地方还能找到原因。

7.组件库按需导入和定制主题

       我们项目中用到的组件库是Vant2，该组件库依赖Less，以及通过配置文件来定制组件的主题，在配置中我们需要进行修改：

       vue-cli中的主题配置部分如下：

<!--?忽略一些代码?--><body><div?id="app"></div>++?<script?type="module"?src="/src/main.js"></script>?++</body>4

       vite中主题配置部分如下：

<!--?忽略一些代码?--><body><div?id="app"></div>++?<script?type="module"?src="/src/main.js"></script>?++</body>5

       按需导入项目中按需导入vant组件库，组件可以成功导入，但是组件的样式缺失了，这是因为在webpack中，babel-plugin-import插件帮我们实现了组件的样式导入，在vite中使用?vite-plugin-style-import插件帮我们实现这个功能，不仅vant组件库，其他诸如element、antv等组件库也可以使用这个插件进行按需导入：

<!--?忽略一些代码?--><body><div?id="app"></div>++?<script?type="module"?src="/src/main.js"></script>?++</body>6<!--?忽略一些代码?--><body><div?id="app"></div>++?<script?type="module"?src="/src/main.js"></script>?++</body>.修改alias别名配置，以及忽略文件后缀

       vite配置别名的方法和vue-cli有所不同，且没有默认的别名，都需要通过配置实现，且vite默认不能忽略文件后缀导入，我们也需要通过修改配置来实现：

<!--?忽略一些代码?--><body><div?id="app"></div>++?<script?type="module"?src="/src/main.js"></script>?++</body>8

       需要注意extensions配置的顺序，从左到右进行匹配，如果存在同名但类型不同的文件，很可能得到期望外的结果，比如同目录下存在index.js和index.vue，按上面的顺序，import'./index?会优先匹配到index.js文件。这种情况建议补全后缀进行导入。

9.配置前端跨域

       vite配置跨域和webpack也有出入，需要修改配置

<!--?忽略一些代码?--><body><div?id="app"></div>++?<script?type="module"?src="/src/main.js"></script>?++</body>9

       以上就是几种常见的跨域配置方式，webpack中的devServer改为了server,webpack的proxy中的pathRewrite改成了rewrite，并且类型成为了函数，在函数中返回请求的路径即可。

.多页打包以及打包的其他配置

       vite在build.rollupOptions配置多页打包，参考rollupOptions，其他配置参考文档

import?{ ?defineConfig?}?from?'vite'export?default?defineConfig({ }).配置运行路径

       base是指项目运行在服务器的哪个路径下，一般通过从环境变量中动态获取。

import?{ ?defineConfig?}?from?'vite'export?default?defineConfig({ }).配置EsLint

       vite中使用vite-plugin-eslint插件实现eslint的检查功能，安装过程中发现vite-plugin-eslint@1.4.0会报错，安装1.3.0版本即可。

import?{ ?defineConfig?}?from?'vite'export?default?defineConfig({ })2import?{ ?defineConfig?}?from?'vite'export?default?defineConfig({ }).使用插件@vitejs/plugin-legacy兼容低版本浏览器

       plugin-legacy文档

import?{ ?defineConfig?}?from?'vite'export?default?defineConfig({ }).配置运行指令import?{ ?defineConfig?}?from?'vite'export?default?defineConfig({ })5

       可以在指令中声明mode环境，这个mode在vite.config.js中可以得到，具体可以参考前面4.修改环境变量

       保存运行指令npmrunserve开发环境已经可以跑起来了，但是vite的特性是你用到的页面才会进行打包，其他页面没有进行访问，是不会打包的，所以需要进行打包才能知道其他地方改造会不会有问题，打包如果有报错，再解决报错即可。

.解决报错

       globalisnotdefined

       这个错误是在node_modules/buffer/index.js?v=ea7文件中抛出的，我查看了yarn.lock文件，依赖路径为多个vue-cli插件>webpack@4.0.0>node-libs-browser?>buffer

       这个是依赖的问题，第一删除node_modules重新安装依赖。第二更换npm工具为pnpm重装依赖，如果仍不行，建议不建议webpack，删除掉webpack相关依赖。

       网上还有一种做法是：在window对象上挂载global对象，可作为备选方案。

import?{ ?defineConfig?}?from?'vite'export?default?defineConfig({ })6

       @import'~@vant/icons/src/encode-woff2.less';报错

       这个错误是vant组件库中的icon组件抛出的，vite默认不能使用别名，我们在前面配置了别名，但是配置的是~@指向项目中的src目录，这样vant组件库的这个文件引用就找不到了。

       issuesvant

       解决方法：针对vant的这个文件，做一个别名，放到第一位，优先进行匹配：

import?{ ?defineConfig?}?from?'vite'export?default?defineConfig({ })7

       运行vitebuild，css产生了一些警告。

       警告分为两种，一是css中的属性拼写错误，诸如：color写成了colo，background写成了backgrounc，属于语法错误，根据警告提示搜索对应样式进行修改即可。

       二是一些语法正确，但还不清楚为什么压缩时提示了警告：比如stylus修改scoped样式用的>>>语法，以及background?rgba(0,0,0,0.5)提示Unexpected"rgba("。

       Thepackagemayhaveincorrectmain/module/exportsspecifiedinitspackage.json

       这个错误是通过npminstall后运行vite指令报错的，用yarn安装一直很正常，原因是node_modules的某个包的package.json定义的main入口路径错了，所以找不到模块导入。

       解决方法：针对这个模块，定义别名，指向正确的入口：

import?{ ?defineConfig?}?from?'vite'export?default?defineConfig({ })8

       打包后导入函数定义别名后，调用函数报错

       import*asminByfrom'lodash.minby'代码报错了，而且只有在生产环境下才产生。

       解决方法：暂时去掉别名，这应该和lodash的导出方式modules.export在vite中转化成ES语法的过程有关系。

       importminByfrom'lodash.minby'

       requireisnotdefine，通过require导入资源报错

       前面在步骤5已经用了插件vite-plugin-commonjs转化common.js的代码了，require理应不会报错。

       但是require导入资源算是webpack的功能，和js代码不一样，所以导入资源的代码都要进行修改：

       require('./images/logo.png')改成importlogofrom'./images/logo.png'

       这样的修改可以兼容webpack和vite，这是在现有项目中，改动的地方会达到上百处，非常麻烦。

vuecli和webpack什么关系(vuecli和@vuecli)

       vue和vue-cli是什么关系？

       vue-cli相当于脚手架，给你自动生成模板工程；vue-router是vue路由插件，支持你单页应用的；vue-loader是webpack下loader插件，可以把.vue文件输出成组件。

       å­¦ä¹ ï¼Œæ˜¯æŒ‡é€šè¿‡é˜…读、听讲、思考、研究、实践等途径获得知识和技能的过程。学习分为狭义与广义两种:

       ç‹­ä¹‰:通过阅读、听讲、研究、观察、理解、探索、实验、实践等手段获得知识或技能的过迟冲程，是一种使个体可以得到持续变化(知识和技能，方法与过程，情感与价值的改善和升华)的行为方式。例如通过学校教育获得知识的过程。

       å¹¿ä¹‰:是人在生活过程中，通过获得经验而产生的行为或行为潜能的相对持久为方式。

       ç¤¾ä¼šä¸Šæ€»ä¼šå‡ºçŽ°ä¸€ç§å¾ˆå¥‡æ€ªçš„现象，一些人嘴上埋怨着老板对他不好，工资待遇太低什么的，却忽略了自己本身就是懒懒散散，毫无价值。

       è‡ªå¤ä»¥æ¥ï¼Œäººä»¬å°±ä¼šè¯´ç€â€œå› æžœå¾ªçŽ¯â€ï¼Œè¿™è¯çœŸä¸å‡ï¼Œä½ ç§ä»€ä¹ˆå› ï¼Œå°±ä¼šå¾—到什么果。这就是不好好学习酿成的后果，那么学习有什么重要性呢？

       ç‰©ä»¥ç±»ç¦…尺聚人以群分，什么样水平的人，就会处在什么样的环境中。更会渐渐明白自己是什么样的能力。了解自己的能力，交到同水平的朋友，自己个人能力越高，自然朋友质量也越高。

       åœ¨å¤§å¤šæ•°æƒ…况下，学习越好，自身贺旦高修养也会随着其提升。同样都是有钱人，暴发户摆弄钱财只会让人觉得俗，而真正有知识的人，气质就会很不一样。

       é«˜ç«¯å¤§æ°”的公司以及产品是万万离不了知识的，只有在知识上不输给别人，才可以在别的地方不输别人。

       å­©å­çš„教育要从小抓起，家长什么样孩子很大几率会变成什么样。只有将自己的水平提升，才会教育出更好的孩子。而不是一个目光短浅的人。

       å› ä¸ºæœ‰æ–‡åŒ–的父母会给孩子带去更多的在成长方面的的帮助，而如果孩子有一个有文化的父母，通常会在未来的道路上，生活得更好，更顺畅。

       å­¦ä¹ æ˜¯éžå¸¸çš„重要，学习的好坏最终决定朋友的质量、自身修养和后代教育等方面，所以平时在学习中要努力。

       webpack和vue-cli之间有什么关系呢？

       é¡¹ç›®ç¤ºä¾‹åœ°å€ï¼š

       é¡¹ç›®è¿å¹¶åµè¡Œç»æ˜Œä¾:

       ä¸‹è½½é¡¹ç›®ä¹‹åŽ

       #下载依赖npminstall#运行npmrundev一、开发环境迅轿

webpack打包生产环境，复制文件的配置管理（如/public/)

       ä¸€ä¸ªweb端和桌面端公用的工程，某些文件不需要或者无法用wekpack压缩，放入/public/文件夹（Vue工程），而该文件夹不会经过处理，直接复制到生产目录。

       æŽ§åˆ¶ç”Ÿäº§åŒ…的体积：根据运行环境(web||桌面），甚至客户端版本，消减客户端体积。

       æ¯”如/public/中有桌面端才需让笑销要的.dll，但是web端也会打包生成出来。

       vue-cli包装了webpack，文件打包必然是跟它有关系。审查webpack的配置：

       åœ¨output.js内搜索public，找到最可能相关的一升族项CopyPlugin

       æŸ¥é˜…该插件文档确认它正是我要找的

       æŸ¥é˜…配置项，发现ignore属性可以控制不去复制坦游哪些资源到目的地

       æ‰“å¼€vue.config.js文件，这可以自定义打包配置

       é¦–先为了更自由，选择高级一些的chainWebpack来改配置

       æ›´ç»†è…»çš„控制请翻阅插件主页CopyWebpackPlugin

       å¦‚需控制打包中某些文件的直接复制过程，可以通过配置webpack的CopyWebpackPlugin来达到目的。

请问一下：vue,webpack,Node.js三者有什么联系呢？

       vue是一种js框架，wepack是掘者打包工具，nodejs也是js后台框架，三者就相当于是虚散信表兄弟，表兄妹的关系，没有直系亲差轮属的关系。

一篇文章说清webpack、vite、vue-cli、create-vue的区别

       å…ˆçœ‹è¿™ä¸ªè¡¨æ ¼ï¼š

       æ˜¯ä¸æ˜¯æœ‰äº†ä¸€ä¸ªæ•´ä½“的感觉？我们再来详细的看一下。

       å®˜ç½‘：

       vue-cli是Vue早期推出的一款脚手架，使用webpack创建Vue项目，可以选择安装需要的各种插件，比如Vuex、VueRouter等。

       vue-cli用于创建vue2的项目；

       @vue/cli用于创建vue3的项目，当然也支持vue2。

       ä½¿ç”¨èµ·æ¥è¿˜æ˜¯æ¯”较繁琐的，首先要安装脚手架，然后使用vuecreatehello-world创建项目，具体的就不介绍了丛绝颂。

       å®˜ç½‘：

       create-vue是Vue3的专用脚手架，使用vite创建Vue3的项目，也可以选择安装需要的各种插件，使用更简单。

       ç„¶åŽæˆ‘们可以选择需要的各种插件：

       å®˜ç½‘：

       ä½¿ç”¨vite不仅可以创建vue的项目，而且可以创建react等项目，只是需要手动渗郑安装第三方插件，有点麻烦。

       ç›®å‰æ”¯æŒçš„模板预设如下：

       å®˜ç½‘：

       rollup是一种打包工具，特点就是，打的包非常精简，体积小。

       å®˜ç½‘是英文的，中文资料也比较少，不过好在常规用法可以参考vite的官网。

       å°¤é›¨æºªåœ¨çŸ¥ä¹Žçš„一次回答（）里提到：

       webpack是一个全能选手宏颂，啥都能干，只是有点复杂，对新手不太友好。

       Rollup是后起之秀，打包更简洁。

       vite把rollup变成了“开袋即食”，便于新手入门。

       create-vue基本取代了vue-cli，除非你想创建vue2的项目。

       æ‰€ä»¥ï¼Œæƒ³åˆ›å»ºä¸€ä¸ªvue3的项目，首选create-vue，非常方便快捷，建立的项目也可以统一风格。

vuecliservice不是内部命令？

       vue-cli-service不是内部命令或外部命令

       在项目文件夹下安装依赖npminstall或cnpmi（cnpm使用前提是切换了盯腊镜像）没有成功铅让

       检查项目文件夹下是否有node_model文件夹，没有则重新npminstall安装，有则删除node_model文件夹重新凯激滑安装依赖

       VueCLI内网安装（禁止运行vue指令解决方案）

       1、Vuecli简介：

       Vuecli是一个基于Vue.js进行快速开发的完整系统，VueCLI致力于将Vue生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天败扰去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需eject。

       cli(@vue/cli)是一个全局安装的npm包，提供了终端里的vue命令。察好旦它可以通过vuecreate快速搭建袜纯一个新项目，或者直接通过vueserve构建新想法的原型。你也可以通过vueui通过一套图形化界面管理你的所有项目。

       2、Vuecli安装

       npminstall-g@vue/cli

       安装之后，运行vue指令，遇到以下问题：由于公司内网执行策略限制，会禁止运行vue指令。

       解决方案及步骤如下：

       第一步：执行Set-ExecutionPolicyRemoteSigned更改执行策略。

       第二步：如果没有权限更改全局的执行策略，加上-ScopeCurrentUser后再次更改（Set-ExecutionPolicyRemoteSigned-ScopeCurrentUser），并为ExecutionPolicy参数提供值为：RemoteSigned。

       第三步：执行策略更改完成后，成功运行vue指令。

vue项目：重新安装windows系统之后，vuecli3.0脚手架项目无法运行，npm不是内部命令

       需要先安装nodejs网页链接

       如果安装后仍然不能运行，就是自动配置环境变量失败了，需要简迟手动配置环境变量网页判咐猛链接掘桥

'vue-cli-service'不是内部或外部命令，也不是可运行的程序或批处理文件。

       windowns下搭建好vue环境，使用npmrunserve启动项目，报错如下

       1.把项目此粗中的局扒轿node_modules文件夹删掉

       2.执行命令npminstall

       3.安装成功之后，再次启动项目桐肆即可

安装@vue/cli之后，'vue'不是内部或外部命令，也不是可运行的程序

       1.@vue/cli的安装

       执行npminstall-g@vue/cli或者yarnglobaladd@vue/cli

       2.@vue/cli安装完成

       3.检查@vue/cli是否安装明稿派成功

       执行vue--version，看到如下图的结果

       4.如果提示：'vue'不是内部或外部命令，也不是可运行的程序敬辩该如何解决？

       一般出现这个问题，是因为没有配置全局变量

       4.1npmconfiglist查看一下npm的配置信息，如下图：

       4.2找到上图红色框激贺里面的路径，看看有没有vue.cmd的文件，然后把这个路径添加的系统环境变量的path里面，如下图：

       4.3重新打开cmd窗口执行vue--version，看看是否成功

Vue修改默认启动端口的几种方法

       修改Vue默认启动端口有多种方法，以下为其中几种操作步骤：

       首先，可以直接修改项目根目录的config文件夹中的index.js文件，找到端口配置项“port”，并将其修改为所需端口，如。

       其次，可以创建一个名为vue.config.js的新文件，在项目根目录下，配置端口参数以达到修改目的。

       第三种方法是直接修改vue-cli源代码。打开项目中的node_modules/@vue/cli-service/lib/commands/serve.js文件，找到相关端口配置项并修改为所需端口，如端口。

       若同时设置了serve.js和vue.config.js，最终启动端口将以vue.config.js内的端口为准。