0
点赞
收藏
分享

微信扫一扫

Vue项目全面解析vuecil3/vuecil4的vue.config.js等常用配置

左手梦圆 2022-03-12 阅读 39



前端变化日新月异,层出不穷,公司原项目使用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​
  • 注意事项


  1. 环境变量的配置值只能是 ​键值对​ 形式,不需要带双引号;
  2. 如果想分​开发​环境或​生产​环境类分别配置,则同级新建​​.env.development​​​或​​.env.production​​​文件并书写相关键值对,此文件优先级大于​​.env​​文件;
  3. 只有以 ​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 检查是否安装完成

Vue项目全面解析vuecil3/vuecil4的vue.config.js等常用配置_vue.config.js

2.2 npm-check 升级

  • 操作命令概览
-u, --update          交互更新
-y, --update-all 全部更新
-g, --global 查看全局模块
-s, --skip-unused 跳过检查未使用的包
-p, --production 跳过开发环境依赖模块.
-d, --dev-only 只看devDependencies;
  • 常用命令
>> npm-check -u

Vue项目全面解析vuecil3/vuecil4的vue.config.js等常用配置_f5_02

这样会检测到所有npm包的情况,最后使用空格选择所要升级的包,回车确认,这样你就会获得一个新版本框架下的包均为最新的项目,

Vue项目全面解析vuecil3/vuecil4的vue.config.js等常用配置_vuecil3_03

然后看新的版本包是否有语法改变,去完善即可。

三、内网环境更换镜像库

由于我们的项目是在内网环境开发,特记录一下如何在内网环境更换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+及其他插件的使用。



举报

相关推荐

0 条评论