vue-cli3.0 自己收藏

逃离我推掉我的手 2021-09-20 10:16 263阅读 0赞

自己留着当笔记的 不要误会.

方向键上下移动，空格选中，Enter确定

> \[2018-07-31更新\]： vue-cli 3.0正式版的中文文档已经出来了，详细的可以参考：[https://cli.vuejs.org/zh/guide/][https_cli.vuejs.org_zh_guide]  
> 关于Vue的其他基础知识，可以看我的文章（持续更新中）：  
> 1. [Vue入门（1）——简介与安装][Vue_1]

> ## Vue CLI介绍 ##
> 
> Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：
> 
>  *  通过 @vue/cli 搭建交互式的项目脚手架。
>  *  通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
>  *  一个运行时依赖 (@vue/cli-service)，该依赖：
>     
>      *  可升级；
>      *  基于 webpack 构建，并带有合理的默认配置；
>      *  可以通过项目内的配置文件进行配置；
>      *  可以通过插件进行扩展。
>      *  一个丰富的官方插件集合，集成了前端生态中最好的工具。
> 
> Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject

## 1. 环境准备 ##

### 1.1. 安装Node.js （建议使用LTS版本） ###

### 1.2. nrm安装及npm registry设置 ###

// use npm
    npm i nrm -g
    // use yarn
    yarn global add nrm

查看可用的npm源

nrm ls

![format_png][]

nrm查看npm源.png

切换npm源(以使用taobao为例)

// 用法： nrm use ***
    nrm use taobao
    // 切换之后可用 nrm ls查看是否已经切换了npm源

![format_png 1][]

nrm切换npm源.png

### 1.3. 安装yarn ###

npm i yarn -g

### 1.4. 安装vue-cli 3.0 ###

npm i @vue/cli -g

## 2. vue-cli搭建脚本文件 ##

> 以搭建一个项目名称为`vue-test`的Vue前端项目为例

在终端输入以下命令

vue create vue-test

根据提示进行相应的配置（以手动配置为例）：

### 2.1. 选择`Manually select features` ###

![format_png 2][]

vue-cli-0.png

### 2.2. 选择项目需要的一些特性（此处我们选择需要Babel编译、使用Vue路由、Vue状态管理器、CSS预处理器、代码检测和格式化、以及单元测试，暂时不考虑端到端测试(E2E Testing)） ###

![format_png 3][]

vue-cli-1.png

### 2.3. 选择CSS预处理器语言，此处选择LESS ###

![format_png 4][]

vue-cli-2.png

### 2.4. 选择ESLint的代码规范，此处使用 Standard代码规范 ###

![format_png 5][]

vue-cli-3.png

### 2.5. 选择何时进行代码检测，此处选择在保存时进行检测 ###

![format_png 6][]

vue-cli-4.png

### 2.6. 选择单元测试解决方案，此处选择 Jest ###

![format_png 7][]

vue-cli-5.png

### 2.7. 选择 Babel、PostCSS、ESLint等配置文件存放位置，此处选择单独保存在各自的配置文件中 ###

![format_png 8][]

vue-cli-6.png

### 2.8. 配置完成后等待Vue-cli完成初始化 ###

![format_png 9][]

vue-cli-7.png

### 2.9. vue-cli初始化完成后，根据提示，进入到vue-test项目中，并启动项目 ###

// 进入到vue-test项目
    cd vue-test
    // - 启动服务
    yarn serve
    // - 打包编译
    yarn build
    // - 执行lint
    yarn lint
    // - 执行单元测试
    yarn test:unit

## 3. vue.config.js配置 ##

### 3.1 vue.config.js介绍 ###

此部分内容参考[Vue-cli配置参考][Vue-cli]

> `vue.config.js`是一个可选的配置文件，如果项目的（和package.json同级的）根目录中存在这个文件，那么它会被`@vue/cli`自动加载。你也可以使用`package.json`中的`vue`字段，但是注意这种写法需要你严格遵照JSON的格式来写。

这个文件应该导出了一个包含了选项的对象

// vue.config.js
    module.exports = {
      // 选项...
    }

### 3.2. 配置代理 ###

> 如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置

devServer

*  Type: Object  
    [所有`webpack-dev-server`的选项][webpack-dev-server]都支持.注意：
    
     *  有些值像`host`、`port`和`https`可能会被命令行参数覆写
     *  有些像`publicPath`和`historyApiFallback`不应该被修改，因为它们需要和开发服务器的baseUrl同步以保障正常工作

devServer.proxy

*  Type:`string | object`  
    `devServer.proxy`可以是一个指向开发环境API服务器的字符串：

module.exports = {
      devServer: {
        proxy: 'http://localhost:4000'
      }
    }

这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到`http://localhost:4000`。

如果你想要更多的代理控制行为，也可以使用一个 `path: options` 成对的对象。完整的选项可以查阅 [http-proxy-middleware][] 。

`vue-cli2.0`创建的项目的代理配置方式是修改`config/index.js`文件中的proxyTable:

![format_png 10][]

image.png

`vue-cli3.0`的代理配置，直接将proxyTable中配置copy到devServer.proxy中即可：

module.exports = {
      devServer: {
        proxy: {
         '/hrm/api': {
            //target: 'http://192.168.1.209:10751/', // Dev环境
            //  target: 'http://192.168.1.238:10751/', // Test环境
            // target: 'http://192.168.1.215:10751/', // Rls环境
            target: 'http://192.168.1.218:10751/', // 正式环境
            changeOrigin: true,
            autoRewrite: true,
            cookieDomainRewrite: true,
            pathRewrite: {
              '^/hrm/api/': '/'
            }
          }
        }
      }
    }

### 3.3. 配置Webpack其他选项 ###

参考：[webpack简单的配置方式][webpack]

调整webpack配置最简单的方式就是在`vue.config.js`中的`configureWebpack`选项提供一个对象：

module.exports = {
      // 其他选项...
      configureWebpack: {
        plugins: [
          new MyAwesomeWebpackPlugin()
          //......
        ]
      }
    }

> **警告**  
> 有些 webpack 选项是基于 vue.config.js 中的值设置的，所以不能直接修改。例如你应该修改 vue.config.js 中的 outputDir 选项而不是修改 output.path；你应该修改 vue.config.js 中的 baseUrl 选项而不是修改 output.publicPath。这样做是因为 vue.config.js 中的值会被用在配置里的多个地方，以确保所有的部分都能正常工作在一起。

## 4. 升级已有项目到vue-cli 3.0版本 ##

> 之前有考虑过通过将现有项目进行修改，安装@vue/cli以及相关的包，发现行不通。其实，最简单的方法，就是使用vue-cli 3.0，创建一个新的项目，然后将原有的项目的源码拷到新的项目中即可

1.  使用vue-cli创建新的项目
2.  删除新项目中`src`下的内容
3.  将原有项目`src`中的源码拷贝到新项目的`src`中
4.  将原有项目的`index.html`及`favicon.ico`拷贝到新项目的`public`中
5.  将原有的\***`static`文件夹**也拷贝到新项目的`public`中
6.  修改package.json、.babelrc等文件，保持和原有项目一致即可

build之后静态目录存放位置区别：

<table> 
 <thead> 
  <tr> 
   <th>vue-cli 2.0</th> 
   <th>vue-cli 3.0</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>存放在 <code>dist/static</code>下</td> 
   <td>存放于 <code>dist/assets</code> 下</td> 
  </tr> 
 </tbody> 
</table>

> **注意**：  
> 使用vue-cli 2.x版本创建的项目，放在static下的文件，`build`之后，是会拷贝到`dist\static`项目下的，所以，也必须要将static文件夹移到新项目的`public`文件夹中； 会有放在static目录的，大部分是一些用于下载的，或者是大的图片、库等不需要编译的  
> 2.0脚手架默认生成的静态文件是放在`dist/static`下，3.0默认升成的静态文件是放在 `dist/assets`下的，但是对于项目的升级来说，影响不大

如下图，原有项目的static中的`histudy`文件夹和`wx.zip`文件，编译后是会被拷贝到`dist/static`下的

![format_png 11][]

image.png

vue-cli 3.0创建的项目，放在public目录的，编译时才会被拷贝到dist目录中，具体的配置方法，可以通过vue.config.js去配置，有兴趣的可以去研究研究  
如下图：`src`中的`**.vue`等文件，编译后生成的 `img/css/js`文件夹，都会被拷贝到`dist/assets`中，public中的文件/文件夹会被拷贝到dist目录下。为了不修改原有项目的代码，直接将原项目的static文件夹拷贝到新项目的public下即可。

![format_png 12][]

[https_cli.vuejs.org_zh_guide]: https://cli.vuejs.org/zh/guide/
[Vue_1]: https://www.jianshu.com/p/4f82bb24062e
[format_png]: /images/20210726/8118593bc3d546f5aafb1ec4f5d42829.png
[format_png 1]: /images/20210726/8d7ea6897259461ea5fa16f594cdfecf.png
[format_png 2]: /images/20210726/8b7fb6b1cf1c476686f7144690080684.png
[format_png 3]: /images/20210726/29deea72653f426dabe5d534c59a3521.png
[format_png 4]: /images/20210726/d20553218e8b46009dd8906911cf9e19.png
[format_png 5]: /images/20210726/0822d89293d7419987263f1789f23861.png
[format_png 6]: /images/20210726/e666c91c821a48388e92d6d225d61f35.png
[format_png 7]: /images/20210726/1088cd4367dd4e7a85a658afff4cfe17.png
[format_png 8]: /images/20210726/d15cacf76c574f0bbd84c265be9a7320.png
[format_png 9]: /images/20210726/55735c4c23d843618d381e5860eb4c6b.png
[Vue-cli]: https://cli.vuejs.org/zh/config/
[webpack-dev-server]: https://webpack.js.org/configuration/dev-server/
[http-proxy-middleware]: https://github.com/chimurai/http-proxy-middleware#proxycontext-config
[format_png 10]: /images/20210726/214303e54f7d458bbb8a521ff6f7ee7b.png
[webpack]: https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F
[format_png 11]: /images/20210726/eb9c6bce50214f4d8b290fbe2bdc4621.png
[format_png 12]: /images/20210726/bf4b14d78100441890e0e00026e021d9.png