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

前端变化日新月异，层出不穷，公司原项目使用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 检查是否安装完成

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+及其他插件的使用。