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

一、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:{}}中的 buildassetsPublicPath 属性从’/‘改为‘./‘然后重新打包即可
注意上面的步骤,是修改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 -gyarn 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+)。你可以使用 nvmnvm-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

Thinkingcao CSDN认证博客专家 Java Spring Boot 微服务
CSDN2019年度博客之星、博客专家,专注架构、Java、Spring、SpringBoot、SpringCloud、微服务、数据库、分布式、中间件、源码分析、JVM性能调优、K8S等领域
微信搜索公众号:「Thinking曹」,一个执着于架构的JAVA基层码农,每天带你学习新知识。
相关推荐
©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师:白松林 返回首页
实付 19.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值