脚本宝典收集整理的这篇文章主要介绍了

项目迁移 vue cli 3 (上)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><a href="https://github.com/sunseekers/Vue/blob/master/vue-cli-upper.md" rel="nofollow noreferrer" target="_blank">原文地址</a></p> <p>vue cli 3x 发布已经有好长一段时间了,webpack 现在版本已经到了 4.30.0;如果我们现在搭建项目很自然都是用的最新的稳定版本,蛮好的没有任何问题。 体验极致的开发体验那是必须的,可是问题来了,由于历史原因,我们公司项目使用的并不是最稳定的,每一次启动项目都需要很长一段时间, 每一次编译项目也要等很久。每次开发必吐槽</p> <p><span class="img-wrap"><img data-src="/img/bVbsfL6" src="/img/bVbsfL6" alt="图片描述" title="图片描述" style="cursor: pointer; display: inline;"></span></p> <p>吐槽始终解决不了问题,与其吐槽不如自己动手去解决。最终决定尝试一下,推动项目框架升级这一路走的很艰辛,不管最后结果如何,都决定尝试尝试。但行好事莫问前程。</p> <p>目前工作项目中的痛点<br />项目编译很慢,npm run dev 或者 npm run build 或者每一次修改完代码再次编译,好像要等一个世纪一样久</p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_4_expand" style="display:inline-table;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><ins id="aswift_4_anchor" style="display:block;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_4" name="aswift_4" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>公司项目配套有10套环境,开发四套,测试四套,线上,灰度一套,每次切换环境都是在 config/index 手动改,有时候会不小心提交代码合并到主干发生意外</p> <p>项目升级后解决了<br />编译速度比以前快了很多</p> <p>实现了通过命令行去切换环境</p> <p>打包后的内存空间减少了90%+</p> <p>升级后遗症<br />更加了解整个项目</p> <p>熟悉 pm2 相关命名</p> <p>get 新技能</p> <p>项目实践 vue cli 3.0<br />初步尝试公司小项目,性能对比</p> <p>h5-web-app 是 vue cli 2x 构建的 "webpack": "^3.6.0"</p> <p>mobile 是 vue cli 3x 构建的 "version": "4.26.1"</p> <p><span class="img-wrap"><img data-src="/img/bVbsfNH" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span><br /><span class="img-wrap"><img data-src="/img/bVbsfOe" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>注:vue cli 也是用 vue cli3 构建的项目 咋一看,好像目录结构都不一样了,我告诉你是的,相对于之前没那么啰嗦的,看上去更加简洁明了</p> <p>性能对比<br />都是在同一台电脑,同一时刻运行的,尽最大可能的减少测试误差</p> <p>本地启动项目(前后两次)</p> <p><span class="img-wrap"><img data-src="https://user-gold-cdn.xitu.io/2018/12/20/167cac2b0995556a?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>build 项目第一次</p> <p><span class="img-wrap"><img data-src="https://user-gold-cdn.xitu.io/2018/12/20/167cac245c96a6bb?w=1157&amp;h=373&amp;f=png&amp;s=56880" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>build 项目第二次<br /><span class="img-wrap"><img data-src="https://user-gold-cdn.xitu.io/2018/12/20/167cac27d9965618?w=1151&amp;h=376&amp;f=png&amp;s=56684" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>前后两次 build 的时间对比很明显,接近50%的提升,有点夸张了</p> <p>打包后占用内存</p> <p><span class="img-wrap"><img data-src="https://user-gold-cdn.xitu.io/2018/12/20/167cac29577e2f10?w=847&amp;h=621&amp;f=png&amp;s=32937" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>打包后的大小也是有点惊人的</p> <p>首页加载时间</p> <p>vue cli 3x 构建的项目<br /><span class="img-wrap"><img data-src="https://user-gold-cdn.xitu.io/2018/12/20/167cac2cdbaf2366?w=1346&amp;h=684&amp;f=png&amp;s=303804" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p><span class="img-wrap"><img data-src="https://user-gold-cdn.xitu.io/2018/12/20/167cac2f5efbe4c9?w=1348&amp;h=686&amp;f=png&amp;s=304525" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>vue cli 2x 构建的项目</p> <p><span class="img-wrap"><img data-src="https://user-gold-cdn.xitu.io/2018/12/20/167cac30f83ac5be?w=1357&amp;h=723&amp;f=png&amp;s=325655" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p><span class="img-wrap"><img data-src="https://user-gold-cdn.xitu.io/2018/12/20/167cac33b76be3bc?w=1356&amp;h=720&amp;f=png&amp;s=318732" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>用我司小项目做一个小小的尝试,看到很明显的性能。尝试性给公司大项目升级</p> <p>个人认为 webpack 构建速度还是蛮重要的,深刻体会。实在是受不了每次编译所要等待时间,自己动手尝试了一下,新版本给我带来的感受。网传 夸张不夸张我不知道,但是自身体验有明显感觉到。<br /><span class="img-wrap"><img data-src="https://user-gold-cdn.xitu.io/2019/2/1/168a81905489182a?w=1438&amp;h=560&amp;f=png&amp;s=150647" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>踩坑记<br />资源预加载<br />&lt;link rel="prefetch"&gt; 是一种 resource hint,用来告诉浏览器在页面加载完成后,利用空闲时间提前获取用户未来可能会访问的内容。 vue cli3.0 默认是开启这个模式的,如果项目小是一个优势,大型项目建议移除。</p> <p>切换到公司大项目的时候就出问题了,如图</p> <p><span class="img-wrap"><img data-src="/img/bVbsfPr" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>当时的我是慌的,一脸茫然的不知道为啥会这样,猜想过路由懒加载失效,上 github ,goole 寻找各种答案。很长时间都没有定位到问题, 想过要放弃,最后坚持下来了,成功解决了。开心</p> <p><span class="img-wrap"><img data-src="/img/bVbsfPH" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>通过命令行,切换环境,而不是手动去修改配置文件</p> <p><span class="img-wrap"><img data-src="https://user-gold-cdn.xitu.io/2019/2/1/168a826e9b5b335e?w=2874&amp;h=800&amp;f=png&amp;s=275045" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>npm run build 会读取 .env.production 文件里面配置的环境变量</p> <p>npm run Devbuild 会读取 .env.dev 文件里面配置的环境变量</p> <p>只有以VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。</p> <p>我在写配置文件的时候忽略掉了前面的 VUE_APP_ ,还有 .env 文本文件,每一行句末不能加逗号或者其他符号。 否者会导致读取不到环境变量,我在这个问题上挖了一个巨大的坑,花了我好长一段时间</p> <p>小项目小尝试,get 到新的知识点</p> <p>在实际的开发中遇到的问题,踩的坑远远不止上面哪几个,只是上面的印象深刻,小小记录一下。踩坑最久的还是 pm2 ,因为公司项目使用他运行的。 后续分享</p> <p>1.mac自带了python2.7 打包之后进入打包文件 dist 可以用python -m SimpleHTTPServer 80 启动项目,和好像和 pm2 效果一样的,</p> <p>2.知道了一点点关于SSR 的知识点</p> <p>是把这个工作放在服务器端做,直接在服务器端生成你想要的最终的页面,然后返回给浏览器,可以做SEO优化和首屏加载速度优化</p> <p>3.pm2 logs 查看项目报错日志信息,定位问题,然后去解决</p> <p>4.netstat -an | grep 8081 和 lsof -nP -i tcp | grep node 这两个命令应该是看端口号上面的吧</p> <p>我是初学者,很多地方不懂,说的不对,请多多指导<br />附上一份自己整理的 webpack 4x 的配置和 vue cli 3x 的配置</p> <p><code>vue.config.js</code></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="const path = require('path') //去console插件 const UglifyJsPlugin = require('uglifyjs-webpack-plugin') //gzip压缩插件 const CompressionWebpackPlugin = require('compression-webpack-plugin') function resolve(dir) { return path.join(__dirname, dir) } module.exports = { outputDir: process.env.outputDir, devServer: { proxy: { '/api': { target: 'http://192.168.0.001:8080', ws: true, changeOrigin: true, pathRewrite: { '^/api': '' } }, '/gateApi': { target: 'http://192.168.0.002:8080', changeOrigin: true, pathRewrite: { '^/api': '' } }, '/xsApi': { target: 'http://192.168.0.003:8080', changeOrigin: true, pathRewrite: { '^/xsApi': '' } } } }, configureWebpack: config => {<br /> config.externals={<br /> vue: &quot;Vue&quot;,<br /> vuex: &quot;Vuex&quot;,<br /> &quot;vue-router&quot;: &quot;VueRouter&quot;,<br /> &quot;element-ui&quot;: &quot;ELEMENT&quot;,<br /> 'v-charts':'VCharts',<br /> 'echarts': 'echarts',<br /> }<br /> let plugins = [<br /> new UglifyJsPlugin({<br /> uglifyOptions: {<br /> compress: {<br /> warnings: false,<br /> drop_debugger: true,<br /> drop_console: true,<br /> },<br /> },<br /> sourceMap: false,<br /> parallel: true,<br /> }),<br /> new CompressionWebpackPlugin({<br /> filename: '[path].gz[query]',<br /> algorithm: 'gzip',<br /> test: new RegExp(<br /> '\.(' + ['js', 'css'].join('|') +<br /> ')$',<br /> ),<br /> threshold: 10240,<br /> minRatio: 0.8,<br /> }),<br /> ]<br /> if (process.env.NODE_ENV !== 'development') {<br /> //在开发环境不压缩,有console日志<br /> config.plugins = [...config.plugins, ...plugins]<br /> }<br /> },<br /> lintOnSave: true,<br /> chainWebpack: (config) => {<br /> config.plugins.delete('prefetch'),<br /> //配置别名<br /> config.resolve.alias<br /> .set('@', resolve('src'))<br /> .set('@assets', resolve('src/assets'))<br /> .set('@constant', resolve('src/constants'))<br /> .set('@components', resolve('src/components'))<br /> .set('@base', resolve('src/base'))<br /> .set('@api', resolve('src/api'))<br /> .set('@common', resolve('src/common'))<br /> .set('@utils', resolve('src/utils'))<br /> .set('@router', resolve('src/router'))<br /> .set('@store', resolve('src/store'))<br /> .set('@mixin', resolve('src/mixin'))<br /> .set('@img', resolve('public/img'))<br /> }<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs cs"><code><span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> path = require(<span class="hljs-string">'path'</span>) <span class="hljs-comment">//去console插件</span> <span class="hljs-keyword">const</span> UglifyJsPlugin = require(<span class="hljs-string">'uglifyjs-webpack-plugin'</span>) <span class="hljs-comment">//gzip压缩插件</span> <span class="hljs-keyword">const</span> CompressionWebpackPlugin = require(<span class="hljs-string">'compression-webpack-plugin'</span>) <span class="hljs-function">function <span class="hljs-title">resolve</span>(<span class="hljs-params">dir</span>)</span> { <span class="hljs-keyword">return</span> path.<span class="hljs-keyword">join</span>(__dirname, dir) } module.<a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a>s = { outputDir: process.env.outputDir, devServer: { proxy: { <span class="hljs-string">'/api'</span>: { target: <span class="hljs-string">'http://192.168.0.001:8080'</span>, ws: <span class="hljs-literal">true</span>, changeOrigin: <span class="hljs-literal">true</span>, pathRewrite: { <span class="hljs-string">'^/api'</span>: <span class="hljs-string">''</span> } }, <span class="hljs-string">'/gateApi'</span>: { target: <span class="hljs-string">'http://192.168.0.002:8080'</span>, changeOrigin: <span class="hljs-literal">true</span>, pathRewrite: { <span class="hljs-string">'^/api'</span>: <span class="hljs-string">''</span> } }, <span class="hljs-string">'/xsApi'</span>: { target: <span class="hljs-string">'http://192.168.0.003:8080'</span>, changeOrigin: <span class="hljs-literal">true</span>, pathRewrite: { <span class="hljs-string">'^/xsApi'</span>: <span class="hljs-string">''</span> } } } }, configureWebpack: config =&gt; { config.externals={ vue: <span class="hljs-string">"<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>"</span>, vuex: <span class="hljs-string">"Vuex"</span>, <span class="hljs-string">"vue-router"</span>: <span class="hljs-string">"VueRouter"</span>, <span class="hljs-string">"element-ui"</span>: <span class="hljs-string">"ELEMENT"</span>, <span class="hljs-string">'v-charts'</span>:<span class="hljs-string">'VCharts'</span>, <span class="hljs-string">'echarts'</span>: <span class="hljs-string">'echarts'</span>, } <span class="hljs-keyword"><a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a></span> plugins = [ <span class="hljs-keyword">new</span> UglifyJsPlugin({ uglifyOptions: { compress: { warnings: <span class="hljs-literal">false</span>, drop_debugger: <span class="hljs-literal">true</span>, drop_console: <span class="hljs-literal">true</span>, }, }, source<a href="http://www.js-code.com/tag/map" title="浏览关于“Map”的文章" target="_blank" class="tag_link">Map</a>: <span class="hljs-literal">false</span>, parallel: <span class="hljs-literal">true</span>, }), <span class="hljs-keyword">new</span> CompressionWebpackPlugin({ filename: <span class="hljs-string">'[path].gz[query]'</span>, algorithm: <span class="hljs-string">'gzip'</span>, test: <span class="hljs-keyword">new</span> RegExp( <span class="hljs-string">'\.('</span> + [<span class="hljs-string">'js'</span>, <span class="hljs-string">'css'</span>].<span class="hljs-keyword">join</span>(<span class="hljs-string">'|'</span>) + <span class="hljs-string">')$'</span>, ), threshold: <span class="hljs-number">10240</span>, minRatio: <span class="hljs-number">0.8</span>, }), ] <span class="hljs-keyword">if</span> (process.env.NODE_ENV !== <span class="hljs-string">'development'</span>) { <span class="hljs-comment">//在开发环境不压缩,有console日志</span> config.plugins = [...config.plugins, ...plugins] } }, lintOnSave: <span class="hljs-literal">true</span>, chainWebpack: (config) =&gt; { config.plugins.delete(<span class="hljs-string">'prefetch'</span>), <span class="hljs-comment">//配置别名</span> config.resolve.<span class="hljs-keyword">alias</span> .<span class="hljs-keyword">set</span>(<span class="hljs-string">'@'</span>, resolve(<span class="hljs-string">'src'</span>)) .<span class="hljs-keyword">set</span>(<span class="hljs-string">'@assets'</span>, resolve(<span class="hljs-string">'src/assets'</span>)) .<span class="hljs-keyword">set</span>(<span class="hljs-string">'@constant'</span>, resolve(<span class="hljs-string">'src/constants'</span>)) .<span class="hljs-keyword">set</span>(<span class="hljs-string">'@components'</span>, resolve(<span class="hljs-string">'src/components'</span>)) .<span class="hljs-keyword">set</span>(<span class="hljs-string">'@base'</span>, resolve(<span class="hljs-string">'src/base'</span>)) .<span class="hljs-keyword">set</span>(<span class="hljs-string">'@api'</span>, resolve(<span class="hljs-string">'src/api'</span>)) .<span class="hljs-keyword">set</span>(<span class="hljs-string">'@common'</span>, resolve(<span class="hljs-string">'src/common'</span>)) .<span class="hljs-keyword">set</span>(<span class="hljs-string">'@utils'</span>, resolve(<span class="hljs-string">'src/utils'</span>)) .<span class="hljs-keyword">set</span>(<span class="hljs-string">'@router'</span>, resolve(<span class="hljs-string">'src/router'</span>)) .<span class="hljs-keyword">set</span>(<span class="hljs-string">'@store'</span>, resolve(<span class="hljs-string">'src/store'</span>)) .<span class="hljs-keyword">set</span>(<span class="hljs-string">'@mixin'</span>, resolve(<span class="hljs-string">'src/mixin'</span>)) .<span class="hljs-keyword">set</span>(<span class="hljs-string">'@img'</span>, resolve(<span class="hljs-string">'public/img'</span>)) } }</code></pre>

总结

以上是脚本宝典为你收集整理的

项目迁移 vue cli 3 (上)

全部内容,希望文章能够帮你解决

项目迁移 vue cli 3 (上)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过