Vue-Cli3版本项目构建打包部署

布满荆棘的人生 2023-06-23 06:54 55阅读 0赞

# **一、Vue cli 3 版本的和Vue cli 2 版本的区别。** #

### **一、安装上区别：** ###

**1.Vue cli 2 版本安装命令 :**

> **`npm install -g vue-cli`**

**2.Vue cli 3 版本安装命令：**

> **`npm install -g @vue/cli`**

### 二、创建项目区别 ###

**1.Vue cli 2 版本创建项目命令 :**

> **`vue init webpack project`**

**2.Vue cli 3 版本创建项目命令 :**

> **`vue create project`**

### 三. 运行项目区别 ###

**1.Vue cli 2 版本运行项目命令 :**

> **`npm run dev`**

**2.Vue cli 3 版本运行项目命令 :**

> **`npm run serve`**

### 四. 项目打包命令一致 ###

**1. 打包编译项目命令：**

> **`npm run build`**

**2. 打包后部署  
执行打包命令:npm run build**  
成功之后会在项目路径生成名为`dist`的文件夹，把`dist 复制到nginx 的html目录下`，`启动nginx`即可  
可能出现的问题就是你访问的时候会出现一个空白的页面，那是因为样式没有找到报`404`

**解决方案：**

修改项目路径下的`conf/index.js` 文件  
修改`module.exports={dev:{},build:{}}`中的 `build` 把 `assetsPublicPath` 属性从`’/‘`改为`‘./‘`然后重新打包即可  
注意上面的步骤，是修改`build中`的`assetsPublicPath`，不是`dev`中的，别改错了地方

### 五. 官方对Vue-Cli3介绍 ###

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，也成为脚手架，**提供：**

`1. 通过 @vue/cli 搭建交互式的项目脚手架。`  
`2. 通过 @vue/cli + @vue/cli-service-global快速开始零配置原型开发。`  
`3. 一个运行时依赖 (@vue/cli-service)，该依赖：`

①. 可升级；    
    ②. 基于 webpack 构建，并带有合理的默认配置；    
    ③. 可以通过项目内的配置文件进行配置；   
    ④. 可以通过插件进行扩展。

`4. 一个丰富的官方插件集合，集成了前端生态中最好的工具。`  
`5. 一套完全图形化的创建和管理 Vue.js 项目的用户界面。`  
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject

### 六、安装 ###

**1. 对于已经安装了旧版**  
`Vue CLI` 的包名称由 `vue-cli`改成了 `@vue/cli`。 如果你已经全局安装了`旧版本`的 `vue-cli`(1.x 或 2.x)，你需要先通过 `npm uninstall vue-cli -g` 或 `yarn global remove vue-cli` 卸载它。  
**命令如下：**

> **卸载以前装的vue-cli**  
> **`npm uninstall -g vue-cli`**  
> **安装vue/cli**  
> **`npm install -g @vue/cli`**  
> **或者**  
> **`yarn global add @vue/cli`**

**2. Node 版本要求**  
`Vue CLI` 需要 `Node.js 8.9` 或更高版本 (推荐 8.11.0+)。你可以使用 `nvm`或 `nvm-windows`在同一台电脑中管理多个`Node`版本。

**3. 安装命令**

> **第一步：`npm install cnpm -g --registry=https://registry.npm.taobao.org`  
> 第二步：`npm install -g @vue/cli`  
> 上述命令也可以使用国内的淘宝镜像安装：`cnpm install -g @vue/cli`**

**4.创建项目**

> `vue-app` 表示项目名

> **`命令：vue create vue-app`**

**上面命令vue create的可选项：**  
**用法：** create \[options\]

创建一个由 `vue-cli-service` 提供支持的新项目

**选项：**  
`-p, --preset <presetName>` : 忽略提示符并使用已保存的或远程的预设选项  
`-d, --default` : 忽略提示符并使用默认预设选项  
`-i, --inlinePreset <json>` : 忽略提示符并使用内联的 JSON 字符串预设选项  
`-m, --packageManager <command>` 在安装依赖时使用指定的 npm 客户端  
`-r, --registry <url>` : 在安装依赖时使用指定的 npm registry  
`-g, --git [message]` : 强制 / 跳过 git 初始化，并可选的指定初始化提交信息  
`-n, --no-git` : 跳过 git 初始化  
`-f, --force` : 覆写目标目录可能存在的配置  
`-c, --clone` : 使用 git clone 获取远程预设选项  
`-x, --proxy` : 使用指定的代理创建项目  
`-b, --bare` : 创建项目时省略默认组件中的新手指导信息  
`-h, --help` : 输出使用帮助信息

**5. 使用图形化界面创建项目**

> **`vue ui`**