Vue项目全面解析vuecil3/vuecil4的vue.config.js等常用配置
2024-05-17 23:10:12
前端变化日新月异，层出不穷，公司原项目使用vuecil2版本开发，elementUI等一系列库版本太低，也脱离世界很久远了，新版本库需要webpack4等环境，而老版本配置起来bug很多，在使用过程中很多东西都不能实现，所以升级真的是迫在眉睫；
此篇会逐步解析：
- vuecil2如何升级到vuecil3+
- vuecil3+的语法
- 二次升级维护手册
- webpack配置项目的优化…
一、vuecil2如何升级到vuecil3+
卸载旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.> x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
node配置
Vue CLI3+ 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)
全局安装包
<span style="color:#000000"><code>npm install -g @vue/cli
# OR
yarn global add @vue/cli
</code></span>创建一个项目
<span style="color:#000000"><code>vue create vue-web-cil4
</code></span>安装所需选择配置：可参考官方配置
二、vuecil3/vuecil4的配置语法
2.1 目录结构
<span style="color:#000000"><code>├── README.md # 说明
|-- dist # 打包后文件夹
├── babel.config.js # babel语法编译
├── package-lock.json
├── public # 静态文件夹,这类资源将会直接被拷贝，而不会经过 webpack 的处理。
│ ├── favicon.ico
│ └── index.html #入口页面
└── src # 源码目录├── App.vue - 页面├── assets - 静态目录,这类引用会被 webpack 处理。│ └── logo.png├── components 组件│ └── HelloWorld.vue└── main.js # 入口文件，加载公共组件
│—— vue.config.js # 配置文件，需自行配置
│—— .gitignore # git忽略上传的文件格式
│—— babel.config.js # babel语法编译
│—— package.json # 项目基本信息
│—— .env # 环境变量和模式，需自行配置
│—— .eslintrc.js # ES-lint校验 </code></span>2.2 vue.config.js 配置
vuecil3+和vuecil2的最大区别就在于内置了很多配置，没有了build文件夹和config的配置。但是在开发中，避免不了的还是需要个性化的配置，之前有写过ts+vue中的vue.config.js的配置文件，这里系统讲一下 vue.config.js的配置；
- 首先在最外层目录下新建文件vue.config.js
- 具体配置
<span style="color:#000000"><code class="language-js"><span style="color:#708090">// vue.config.js</span>
<span style="color:#0077aa">const</span> path <span style="color:#a67f59">=</span> <span style="color:#dd4a68">require</span><span style="color:#999999">(</span><span style="color:#50a14f">'path'</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
<span style="color:#0077aa">const</span> <span style="color:#dd4a68">resolve</span> <span style="color:#a67f59">=</span> <span style="color:#999999">(</span>dir<span style="color:#999999">)</span> <span style="color:#a67f59">=></span> path<span style="color:#999999">.</span><span style="color:#dd4a68">join</span><span style="color:#999999">(</span>__dirname<span style="color:#999999">,</span> dir<span style="color:#999999">)</span><span style="color:#999999">;</span><span style="color:#0077aa">const</span> CompressionWebpackPlugin <span style="color:#a67f59">=</span> <span style="color:#dd4a68">require</span><span style="color:#999999">(</span><span style="color:#50a14f">"compression-webpack-plugin"</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 开启gzip压缩(可选)</span>
<span style="color:#0077aa">const</span> productionGzipExtensions <span style="color:#a67f59">=</span> <span style="color:#986801">/\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i</span><span style="color:#999999">;</span> <span style="color:#708090">// 开启gzip压缩(可选)</span><span style="color:#0077aa">const</span> BundleAnalyzerPlugin <span style="color:#a67f59">=</span> <span style="color:#dd4a68">require</span><span style="color:#999999">(</span><span style="color:#50a14f">"webpack-bundle-analyzer"</span><span style="color:#999999">)</span><span style="color:#999999">.</span>BundleAnalyzerPlugin<span style="color:#999999">;</span> <span style="color:#708090">// 打包分析，(可选)</span><span style="color:#0077aa">const</span> <span style="color:#986801">IS_PRODUCTION</span> <span style="color:#a67f59">=</span> <span style="color:#999999">[</span><span style="color:#50a14f">'production'</span><span style="color:#999999">,</span> <span style="color:#50a14f">'prod'</span><span style="color:#999999">]</span><span style="color:#999999">.</span><span style="color:#dd4a68">includes</span><span style="color:#999999">(</span>process<span style="color:#999999">.</span>env<span style="color:#999999">.</span><span style="color:#986801">NODE_ENV</span><span style="color:#999999">)</span><span style="color:#999999">;</span><span style="color:#708090">//判断是否是生产环境</span>
<span style="color:#708090">/** 正式配置项，以下参数 都是可选**/</span>
module<span style="color:#999999">.</span>exports <span style="color:#a67f59">=</span> <span style="color:#999999">{</span>publicPath<span style="color:#999999">:</span> process<span style="color:#999999">.</span>env<span style="color:#999999">.</span><span style="color:#986801">NODE_ENV</span> <span style="color:#a67f59">===</span> <span style="color:#50a14f">'production'</span> <span style="color:#a67f59">?</span> <span style="color:#50a14f">'/site/vue-demo/'</span> <span style="color:#999999">:</span> <span style="color:#50a14f">'/'</span><span style="color:#999999">,</span> <span style="color:#708090">// 打包公共路径</span>indexPath<span style="color:#999999">:</span> <span style="color:#50a14f">'index.html'</span> <span style="color:#999999">,</span> <span style="color:#708090">// 相对于打包路径index.html的路径</span>outputDir<span style="color:#999999">:</span> process<span style="color:#999999">.</span>env<span style="color:#999999">.</span>outputDir <span style="color:#a67f59">||</span> <span style="color:#50a14f">'dist'</span><span style="color:#999999">,</span> <span style="color:#708090">// 'dist', 生产环境构建文件的目录</span>assetsDir<span style="color:#999999">:</span> <span style="color:#50a14f">'static'</span><span style="color:#999999">,</span> <span style="color:#708090">// 相对于outputDir的静态资源(js、css、img、fonts)目录</span>lintOnSave<span style="color:#999999">:</span> <span style="color:#0184bb">false</span><span style="color:#999999">,</span> <span style="color:#708090">// 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码，false不需要</span>runtimeCompiler<span style="color:#999999">:</span> <span style="color:#0184bb">true</span><span style="color:#999999">,</span> <span style="color:#708090">// 是否使用包含运行时编译器的 Vue 构建版本</span>productionSourceMap<span style="color:#999999">:</span> <span style="color:#a67f59">!</span><span style="color:#986801">IS_PRODUCTION</span><span style="color:#999999">,</span> <span style="color:#708090">// 生产环境的 source map,</span>parallel<span style="color:#999999">:</span> <span style="color:#dd4a68">require</span><span style="color:#999999">(</span><span style="color:#50a14f">"os"</span><span style="color:#999999">)</span><span style="color:#999999">.</span><span style="color:#dd4a68">cpus</span><span style="color:#999999">(</span><span style="color:#999999">)</span><span style="color:#999999">.</span>length <span style="color:#a67f59">></span> <span style="color:#986801">1</span><span style="color:#999999">,</span> <span style="color:#708090">// 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。</span>pwa<span style="color:#999999">:</span> <span style="color:#999999">{</span><span style="color:#999999">}</span><span style="color:#999999">,</span> <span style="color:#708090">// 向 PWA 插件传递选项。</span>chainWebpack<span style="color:#999999">:</span> config <span style="color:#a67f59">=></span> <span style="color:#999999">{</span>config<span style="color:#999999">.</span>resolve<span style="color:#999999">.</span><span style="color:#dd4a68">symlinks</span><span style="color:#999999">(</span><span style="color:#0184bb">true</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 修复热更新失效</span><span style="color:#708090">// 如果使用多页面打包，使用vue inspect --plugins查看html是否在结果数组中</span>config<span style="color:#999999">.</span><span style="color:#dd4a68">plugin</span><span style="color:#999999">(</span><span style="color:#50a14f">"html"</span><span style="color:#999999">)</span><span style="color:#999999">.</span><span style="color:#dd4a68">tap</span><span style="color:#999999">(</span>args <span style="color:#a67f59">=></span> <span style="color:#999999">{</span><span style="color:#708090">// 修复 Lazy loading routes Error</span>args<span style="color:#999999">[</span><span style="color:#986801">0</span><span style="color:#999999">]</span><span style="color:#999999">.</span>chunksSortMode <span style="color:#a67f59">=</span> <span style="color:#50a14f">"none"</span><span style="color:#999999">;</span><span style="color:#0077aa">return</span> args<span style="color:#999999">;</span><span style="color:#999999">}</span><span style="color:#999999">)</span><span style="color:#999999">;</span>config<span style="color:#999999">.</span>resolve<span style="color:#999999">.</span>alias <span style="color:#708090">// 添加别名</span><span style="color:#999999">.</span><span style="color:#0077aa">set</span><span style="color:#999999">(</span><span style="color:#50a14f">'@'</span><span style="color:#999999">,</span> <span style="color:#dd4a68">resolve</span><span style="color:#999999">(</span><span style="color:#50a14f">'src'</span><span style="color:#999999">)</span><span style="color:#999999">)</span><span style="color:#999999">.</span><span style="color:#0077aa">set</span><span style="color:#999999">(</span><span style="color:#50a14f">'@assets'</span><span style="color:#999999">,</span> <span style="color:#dd4a68">resolve</span><span style="color:#999999">(</span><span style="color:#50a14f">'src/assets'</span><span style="color:#999999">)</span><span style="color:#999999">)</span><span style="color:#999999">.</span><span style="color:#0077aa">set</span><span style="color:#999999">(</span><span style="color:#50a14f">'@components'</span><span style="color:#999999">,</span> <span style="color:#dd4a68">resolve</span><span style="color:#999999">(</span><span style="color:#50a14f">'src/components'</span><span style="color:#999999">)</span><span style="color:#999999">)</span><span style="color:#999999">.</span><span style="color:#0077aa">set</span><span style="color:#999999">(</span><span style="color:#50a14f">'@views'</span><span style="color:#999999">,</span> <span style="color:#dd4a68">resolve</span><span style="color:#999999">(</span><span style="color:#50a14f">'src/views'</span><span style="color:#999999">)</span><span style="color:#999999">)</span><span style="color:#999999">.</span><span style="color:#0077aa">set</span><span style="color:#999999">(</span><span style="color:#50a14f">'@store'</span><span style="color:#999999">,</span> <span style="color:#dd4a68">resolve</span><span style="color:#999999">(</span><span style="color:#50a14f">'src/store'</span><span style="color:#999999">)</span><span style="color:#999999">)</span><span style="color:#999999">;</span><span style="color:#708090">// 压缩图片</span><span style="color:#708090">// 需要 npm i -D image-webpack-loader</span>config<span style="color:#999999">.</span>module<span style="color:#999999">.</span><span style="color:#dd4a68">rule</span><span style="color:#999999">(</span><span style="color:#50a14f">"images"</span><span style="color:#999999">)</span><span style="color:#999999">.</span><span style="color:#dd4a68">use</span><span style="color:#999999">(</span><span style="color:#50a14f">"image-webpack-loader"</span><span style="color:#999999">)</span><span style="color:#999999">.</span><span style="color:#dd4a68">loader</span><span style="color:#999999">(</span><span style="color:#50a14f">"image-webpack-loader"</span><span style="color:#999999">)</span><span style="color:#999999">.</span><span style="color:#dd4a68">options</span><span style="color:#999999">(</span><span style="color:#999999">{</span>mozjpeg<span style="color:#999999">:</span> <span style="color:#999999">{</span> progressive<span style="color:#999999">:</span> <span style="color:#0184bb">true</span><span style="color:#999999">,</span> quality<span style="color:#999999">:</span> <span style="color:#986801">65</span> <span style="color:#999999">}</span><span style="color:#999999">,</span>optipng<span style="color:#999999">:</span> <span style="color:#999999">{</span> enabled<span style="color:#999999">:</span> <span style="color:#0184bb">false</span> <span style="color:#999999">}</span><span style="color:#999999">,</span>pngquant<span style="color:#999999">:</span> <span style="color:#999999">{</span> quality<span style="color:#999999">:</span> <span style="color:#999999">[</span><span style="color:#986801">0.65</span><span style="color:#999999">,</span> <span style="color:#986801">0.9</span><span style="color:#999999">]</span><span style="color:#999999">,</span> speed<span style="color:#999999">:</span> <span style="color:#986801">4</span> <span style="color:#999999">}</span><span style="color:#999999">,</span>gifsicle<span style="color:#999999">:</span> <span style="color:#999999">{</span> interlaced<span style="color:#999999">:</span> <span style="color:#0184bb">false</span> <span style="color:#999999">}</span><span style="color:#999999">,</span>webp<span style="color:#999999">:</span> <span style="color:#999999">{</span> quality<span style="color:#999999">:</span> <span style="color:#986801">75</span> <span style="color:#999999">}</span><span style="color:#999999">}</span><span style="color:#999999">)</span><span style="color:#999999">;</span><span style="color:#708090">// 打包分析, 打包之后自动生成一个名叫report.html文件(可忽视)</span><span style="color:#0077aa">if</span> <span style="color:#999999">(</span><span style="color:#986801">IS_PRODUCTION</span><span style="color:#999999">)</span> <span style="color:#999999">{</span>config<span style="color:#999999">.</span><span style="color:#dd4a68">plugin</span><span style="color:#999999">(</span><span style="color:#50a14f">"webpack-report"</span><span style="color:#999999">)</span><span style="color:#999999">.</span><span style="color:#dd4a68">use</span><span style="color:#999999">(</span>BundleAnalyzerPlugin<span style="color:#999999">,</span> <span style="color:#999999">[</span><span style="color:#999999">{</span>analyzerMode<span style="color:#999999">:</span> <span style="color:#50a14f">"static"</span><span style="color:#999999">}</span><span style="color:#999999">]</span><span style="color:#999999">)</span><span style="color:#999999">;</span><span style="color:#999999">}</span><span style="color:#999999">}</span><span style="color:#999999">,</span><span style="color:#708090">//webpack的配置项</span>configureWebpack<span style="color:#999999">:</span> config <span style="color:#a67f59">=></span> <span style="color:#999999">{</span><span style="color:#708090">// 开启 gzip 压缩</span><span style="color:#708090">// 需要 npm i -D compression-webpack-plugin</span><span style="color:#0077aa">const</span> plugins <span style="color:#a67f59">=</span> <span style="color:#999999">[</span><span style="color:#999999">]</span><span style="color:#999999">;</span><span style="color:#0077aa">if</span> <span style="color:#999999">(</span><span style="color:#986801">IS_PRODUCTION</span><span style="color:#999999">)</span> <span style="color:#999999">{</span>plugins<span style="color:#999999">.</span><span style="color:#dd4a68">push</span><span style="color:#999999">(</span><span style="color:#0077aa">new</span> CompressionWebpackPlugin<span style="color:#999999">(</span><span style="color:#999999">{</span>filename<span style="color:#999999">:</span> <span style="color:#50a14f">"[path].gz[query]"</span><span style="color:#999999">,</span>algorithm<span style="color:#999999">:</span> <span style="color:#50a14f">"gzip"</span><span style="color:#999999">,</span>test<span style="color:#999999">:</span> productionGzipExtensions<span style="color:#999999">,</span>threshold<span style="color:#999999">:</span> <span style="color:#986801">10240</span><span style="color:#999999">,</span>minRatio<span style="color:#999999">:</span> <span style="color:#986801">0.8</span><span style="color:#999999">}</span><span style="color:#999999">)</span><span style="color:#999999">)</span><span style="color:#999999">;</span><span style="color:#999999">}</span>config<span style="color:#999999">.</span>plugins <span style="color:#a67f59">=</span> <span style="color:#999999">[</span><span style="color:#a67f59">...</span>config<span style="color:#999999">.</span>plugins<span style="color:#999999">,</span> <span style="color:#a67f59">...</span>plugins<span style="color:#999999">]</span><span style="color:#999999">;</span><span style="color:#999999">}</span><span style="color:#999999">,</span>css<span style="color:#999999">:</span> <span style="color:#999999">{</span>extract<span style="color:#999999">:</span> <span style="color:#986801">IS_PRODUCTION</span><span style="color:#999999">,</span>requireModuleExtension<span style="color:#999999">:</span> <span style="color:#0184bb">false</span><span style="color:#999999">,</span><span style="color:#708090">// 去掉文件名中的 .module</span>loaderOptions<span style="color:#999999">:</span> <span style="color:#999999">{</span><span style="color:#708090">// 给 less-loader 传递 Less.js 相关选项</span>less<span style="color:#999999">:</span> <span style="color:#999999">{</span><span style="color:#708090">// `globalVars` 定义全局对象，可加入全局变量</span>globalVars<span style="color:#999999">:</span> <span style="color:#999999">{</span>primary<span style="color:#999999">:</span> <span style="color:#50a14f">'#333'</span><span style="color:#999999">}</span><span style="color:#999999">}</span><span style="color:#999999">}</span><span style="color:#999999">}</span><span style="color:#999999">,</span>devServer<span style="color:#999999">:</span> <span style="color:#999999">{</span>overlay<span style="color:#999999">:</span> <span style="color:#999999">{</span> <span style="color:#708090">// 让浏览器 overlay 同时显示警告和错误</span>warnings<span style="color:#999999">:</span> <span style="color:#0184bb">true</span><span style="color:#999999">,</span>errors<span style="color:#999999">:</span> <span style="color:#0184bb">true</span><span style="color:#999999">}</span><span style="color:#999999">,</span>host<span style="color:#999999">:</span> <span style="color:#50a14f">"localhost"</span><span style="color:#999999">,</span>port<span style="color:#999999">:</span> <span style="color:#986801">8080</span><span style="color:#999999">,</span> <span style="color:#708090">// 端口号</span>https<span style="color:#999999">:</span> <span style="color:#0184bb">false</span><span style="color:#999999">,</span> <span style="color:#708090">// https:{type:Boolean}</span>open<span style="color:#999999">:</span> <span style="color:#0184bb">false</span><span style="color:#999999">,</span> <span style="color:#708090">//配置后自动启动浏览器</span>hotOnly<span style="color:#999999">:</span> <span style="color:#0184bb">true</span><span style="color:#999999">,</span> <span style="color:#708090">// 热更新</span><span style="color:#708090">// proxy: 'http://localhost:8080' // 配置跨域处理,只有一个代理</span>proxy<span style="color:#999999">:</span> <span style="color:#999999">{</span> <span style="color:#708090">//配置多个跨域</span><span style="color:#50a14f">"/api"</span><span style="color:#999999">:</span> <span style="color:#999999">{</span>target<span style="color:#999999">:</span> <span style="color:#50a14f">"http://197.0.0.1:8088"</span><span style="color:#999999">,</span>changeOrigin<span style="color:#999999">:</span> <span style="color:#0184bb">true</span><span style="color:#999999">,</span>ws<span style="color:#999999">:</span> <span style="color:#0184bb">true</span><span style="color:#999999">,</span><span style="color:#708090">//websocket支持</span>secure<span style="color:#999999">:</span> <span style="color:#0184bb">false</span><span style="color:#999999">,</span>pathRewrite<span style="color:#999999">:</span> <span style="color:#999999">{</span><span style="color:#50a14f">"^/api"</span><span style="color:#999999">:</span> <span style="color:#50a14f">"/"</span><span style="color:#999999">}</span><span style="color:#999999">}</span><span style="color:#999999">,</span><span style="color:#50a14f">"/api2"</span><span style="color:#999999">:</span> <span style="color:#999999">{</span>target<span style="color:#999999">:</span> <span style="color:#50a14f">"http://197.0.0.2:8088"</span><span style="color:#999999">,</span>changeOrigin<span style="color:#999999">:</span> <span style="color:#0184bb">true</span><span style="color:#999999">,</span><span style="color:#708090">//ws: true,//websocket支持</span>secure<span style="color:#999999">:</span> <span style="color:#0184bb">false</span><span style="color:#999999">,</span>pathRewrite<span style="color:#999999">:</span> <span style="color:#999999">{</span><span style="color:#50a14f">"^/api2"</span><span style="color:#999999">:</span> <span style="color:#50a14f">"/"</span><span style="color:#999999">}</span><span style="color:#999999">}</span><span style="color:#999999">,</span><span style="color:#999999">}</span><span style="color:#999999">}</span>
<span style="color:#999999">}</span>
</code></span>以上配置按需引用，常见的配置项都已经写出，其他特殊可参考vue-cil官网，有问题可以留言问我；
2.3 环境变量的配置
vuecil3+关于环境变量的配置方式也发生的改变
- 在package.json同级新建文件
.env - 注意事项
- 环境变量的配置值只能是 键值对 形式，不需要带双引号；
- 如果想分开发环境或生产环境类分别配置，则同级新建
.env.development或.env.production文件并书写相关键值对，此文件优先级大于.env文件； - 只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中，变量书写
VUE_APP_*才会生效；
.env文件配置及使用
<span style="color:#000000"><code class="language-js"><span style="color:#708090">//.env</span>
<span style="color:#986801">VUE_APP_TITLE</span><span style="color:#a67f59">=</span><span style="color:#986801">MY</span> <span style="color:#986801">VUE</span> <span style="color:#986801">APP</span>
<span style="color:#986801">VUE_APP_NAME</span><span style="color:#a67f59">=</span> <span style="color:#986801">JCAT_</span>李小黑
</code></span>页面中使用：
<span style="color:#000000"><code class="language-js">console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span>process<span style="color:#999999">.</span>env<span style="color:#999999">.</span><span style="color:#986801">VUE_APP_TITLE</span><span style="color:#999999">)</span><span style="color:#708090">//"MY VUE APP"</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span>process<span style="color:#999999">.</span>env<span style="color:#999999">.</span><span style="color:#986801">VUE_APP_NAME</span><span style="color:#999999">)</span> <span style="color:#708090">// "JCAT_李小黑"</span>
</code></span>三、vuecil3中的启动打包命令
3.1 package.json文件
<span style="color:#000000"><code class="language-js"> <span style="color:#50a14f">"scripts"</span><span style="color:#999999">:</span> <span style="color:#999999">{</span><span style="color:#50a14f">"serve"</span><span style="color:#999999">:</span> <span style="color:#50a14f">"vue-cli-service serve"</span><span style="color:#999999">,</span> <span style="color:#708090">//启动</span><span style="color:#50a14f">"build"</span><span style="color:#999999">:</span> <span style="color:#50a14f">"vue-cli-service build"</span><span style="color:#999999">,</span> <span style="color:#708090">//打包</span><span style="color:#50a14f">"lint"</span><span style="color:#999999">:</span> <span style="color:#50a14f">"vue-cli-service lint"</span> <span style="color:#708090">//eslint</span><span style="color:#999999">}</span><span style="color:#999999">,</span>
</code></span>3.2 命令
<span style="color:#000000"><code class="language-js"><span style="color:#708090">//启动项目</span>
npm run serve
<span style="color:#708090">//打包项目</span>
npm run build
</code></span>3.3 更多命令配置
- 如果不习惯
npm run serve，可以配置继续使用npm run dev来启动项目；
<span style="color:#000000"><code class="language-js"> <span style="color:#50a14f">"scripts"</span><span style="color:#999999">:</span> <span style="color:#999999">{</span><span style="color:#50a14f">"dev"</span><span style="color:#999999">:</span> <span style="color:#50a14f">"vue-cli-service serve"</span><span style="color:#999999">,</span> <span style="color:#708090">//启动</span><span style="color:#999999">}</span><span style="color:#999999">,</span>
</code></span>- 如果默认localhost访问的同时需要使用本地ip+端口方式访问，则配置：
<span style="color:#000000"><code class="language-js"> <span style="color:#50a14f">"scripts"</span><span style="color:#999999">:</span> <span style="color:#999999">{</span><span style="color:#50a14f">"serve"</span><span style="color:#999999">:</span> <span style="color:#50a14f">"vue-cli-service serve --host 0.0.0.0"</span><span style="color:#999999">,</span> <span style="color:#708090">//启动</span><span style="color:#999999">}</span><span style="color:#999999">,</span>
</code></span>vue项目中的npm包怎么持续的升级维护
一、替换package.json
升级过程后，将旧版本的packag.json文件中的npm包相关代码复制到新版本；
cnpm install或 npm install下载包，然后启动项目，看是否正常。
这时候的插件也是老版本的，所以我们还需要升级npm包，身为优秀的API工程师的我，肯定不会用npm update这种来一个一个升级啊，肯定找个合适的插件让它来帮我升级~
下面介绍升级及之后维护的必备插件：
二、插件：npm-check
2.1 安装升级插件-npm-check
npm install -g npm-check
npm-check 检查是否安装完成
2.2 npm-check 升级
- 操作命令概览
-u, --update 交互更新-y, --update-all 全部更新-g, --global 查看全局模块-s, --skip-unused 跳过检查未使用的包-p, --production 跳过开发环境依赖模块.-d, --dev-only 只看devDependencies;
- 常用命令
>> npm-check -u
这样会检测到所有npm包的情况，最后使用空格选择所要升级的包，回车确认，这样你就会获得一个新版本框架下的包均为最新的项目，
然后看新的版本包是否有语法改变，去完善即可。
三、内网环境更换镜像库
由于我们的项目是在内网环境开发，特记录一下如何在内网环境更换npm镜像地址；
3.1 临时更换npm镜像地址
npm install <registry-name> --registry https://registry.npmjs.org
3.2 永久更换npm镜像地址
npm config set registry https://registry.npmjs.org
npm config list总结
这篇就主要讲vuecil3/4+的配置于之前的版本不同的地方。但路由，vuex用法并没有变化，所以我们项目升级的方法就是：新建了vuecil4.4的新版本项目，然后将src文件代码整体复制到新项目内，启动测试无误。
现版本在打包速度和启动时间上比旧版本优秀，但是改变并不是质的飞跃，升级的目的还是为了整体升级成webpack4+及其他插件的使用。
Vue项目全面解析vuecil3/vuecil4的vue.config.js等常用配置相关推荐
- vue项目升级(01)：全面解析vuecil3/vuecil4的vue.config.js等常用配置
前言 前端变化日新月异,层出不穷,公司原项目使用vuecil2版本开发,elementUI等一系列库版本太低,也脱离世界很久远了,新版本库需要webpack4等环境,而老版本配置起来bug很多,在使用 ...
- Vue项目部署及使用WebStorm开发Vue
Vue项目部署及使用WebStorm开发Vue Vue项目部署 搭建Vue环境 新建Vue项目 使用WebStorm开发Vue WebStorm相关配置 配置路由 全局页面App.vue 全局引入组件 ...
- 解决vue项目中前后端交互的跨域问题、nginx代理配置
最近新接了一个项目,需要自己写一个小demo和后端联调,第一次用自己写的demo和后端联调,出现了问题. 问题:Access to XMLHttpRequest at 'http://192.168. ...
- vue.config.js多页配置
vue.config.js多页配置,具体看代码: "use strict"; const path = require("path"); var webpack ...
- vue.config.js中lintOnSave配置
在vue.config.js文件中配置了lintOnSave属性 作用:设置是否在开发环境下每次保存代码时都启用 eslint验证. value: false:关闭每次保存都进行检测 true:开启每 ...
- vue项目目录结构分析、过滤器、vue文件中基础template、script、style
项目目录结构: 1.在一个项目中一般的目录结构为:my_project------------项目文件夹|____src--------------------------------存放人可以看懂的 ...
- 从零开始的VUE项目–01（前期准备和前台vue搭建）
前端:VUE (2.9.6) (编码工具:Visual Studio Code) 后台:ASP.NET Web API (编码工具:Visual Studio 2019) 数据库:MYSQL (可视化 ...
- 创建vue项目+总结使用(跨域问题+vue 创建)
创建vue项目: -安装node.js-vue脚手架-vue create 项目名字pycharm开发vue项目-需要安装vue.js插件-setting--->plugins--->左下 ...
- vue项目接口地址暴露_vue组件暴露和.js文件暴露接口操作
1.将同一类型的组件放在一个文件夹下 2.在此文件夹下创建一个index.js 3.在index.js中导入组件,并把他们暴露出去 1.写法一 import studentCourse1 from ' ...
最新文章
- 重磅！阿里巴巴江苏总部落户南京建邺区
- 2018年全国多校算法寒假训练营练习比赛（第三场）
- 做支付遇到的HttpClient大坑(一)
- gRPC学习记录(二)--Hello World
- notepad++的NppFTP插件远程连接linux操作系统
- java is-a_java中 is - a和 has - a的区别
- 006-Python迭代器
- 在英特尔架构服务器上构建基于矢量包处理（VPP）的快速网络协议栈
- cannot be cast to org.springframework.web.method.HandlerMethod 统一异常处理发生异常。
- spark数据倾斜解决之提高并行度
- 分享一款在线考试学习系统.net源码
- 通过几种方式来查看windows vista的激活状态
- Matlab图形中输入希腊字母
- Ubuntu上打开windows共享文件夹进行读写操作的命令
- OSChina 周五乱弹 —— 是时候动手了
- python爬虫豆瓣评论论文_Python爬虫(三)——对豆瓣图书各模块评论数与评分图形化分析...
- Redis(五)Redis内存维护方案（过期策略及淘汰策略）
- php xls 繁体字 问号,【专题】如何显示CAD中的繁体字，繁体字出现问号怎么办？...
- Elasticsearch使用说明（搬砖高人）
- 【干货】你头秃都没想到还能这样吧！一篇文章帮你解答