0
点赞
收藏
分享

微信扫一扫

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

左手梦圆 2022-03-12 阅读 40
vuecil3vuecil4vue.config.jsvuef5



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


  2. 环境变量的配置值只能是 ​键值对​ 形式，不需要带双引号；
  3. 如果想分​开发​环境或​生产​环境类分别配置，则同级新建​​.env.development​​​或​​.env.production​​​文件并书写相关键值对，此文件优先级大于​​.env​​文件；
  4. 只有以 ​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+及其他插件的使用。



举报

相关推荐

vue.config.js 配置

Vue-clivue孤独是强者的必经之路webpack学习vue-nodejs前端

vue.config.js配置

vueVue.js专区Vue.jsVue

vue3 vue.config.js配置详解

css配置项生产环境Vue.js前端开发

vue优化，vue.config.js的配置

vue.jsjavascript前端

vue-cli3 之vue.config.js配置

随笔vue前端Vue

#yyds干货盘点#vue.config.js配置解析

html生产环境静态文件JavaScript前端开发yyds干货盘点

vue.config.js

一点点

vue.config.js 配置proxy代理

数据库c#

Vue技术—vue.config.js配置文件

vue.js前端

vue.js中vue.config.js的配置说明

cssgithubhtmlJavaScript前端开发
0 条评论