【Vue】详细介绍Vue-cli部署流程

Vue-cli是一个脚手架工具,可以帮助我们快速生成Vue项目模板并提供了一些常用的配置和插件。Vue-cli提供了多种部署Vue应用的方式,下面详细介绍一下常用的两种方式。

方式一:部署到GitHub Pages

1. 创建Vue项目

首先安装Vue-cli脚手架工具:

`npm install -g vue-cli
`

然后创建Vue项目:

`vue create my-project
`
  1. 配置Vue项目

在src目录下创建vue.config.js文件,并添加如下配置:

`module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-project/'
    : '/'
}
`

其中,publicPath表示项目的基本URL路径,如果你的项目放在自己的服务器上,可以将值设为/。如果你希望将项目部署到GitHub Pages上,则需要将值设为/my-project/,其中my-project是你的GitHub Pages仓库名称。

3. 编译打包

使用以下命令进行编译打包:

`npm run build
`

编译完成后,在项目根目录下会生成一个dist目录,里面包含了所有需要部署的文件。

4. 部署到GitHub Pages

将dist目录下的所有文件上传到GitHub Pages仓库的gh-pages分支中(如果没有该分支,则需要创建),然后在仓库设置中开启GitHub Pages服务。

完成上述步骤后,你就可以通过访问https://<username>.github.io/my-project/来访问你的Vue应用了。

方式二:使用Firebase部署

Firebase是一个Google提供的云服务平台,可以快速构建和部署Web应用,而且提供了免费的托管服务。

1. 创建Vue项目

与方式一相同。

2. 配置Vue项目

在src目录下创建vue.config.js文件,并添加如下配置:

`module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/'
    : '/'
}
`

3. 安装并初始化Firebase

安装Firebase CLI:

`npm install -g firebase-tools
`

使用以下命令初始化Firebase:

`firebase login
firebase init
`

初始化过程中需要配置一些选项,如选择部署到哪个Firebase项目、选择要部署的文件夹、是否配置自动部署等,根据实际情况进行配置即可。

4. 编译打包

使用以下命令进行编译打包:

`npm run build
`
  1. 部署到Firebase

使用以下命令进行部署:

`firebase deploy
`

部署完成后,在Firebase控制台中可以看到你的Web应用的链接,也可以自己绑定自定义域名。

以上就是两种常用的Vue-cli部署Vue应用的方式,选择哪种方式根据实际情况和需求来定。

相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52352 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
画月的亮2 小时前
element-ui 使用过程中遇到的一些问题及解决方法
javascript·vue.js·ui
Moon.92 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
m0_526119402 小时前
点击el-dialog弹框跳到其他页面浏览器的滚动条消失了多了 el-popup-parent--hidden
javascript·vue.js·elementui
垚垚 Securify 前沿站2 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
lyj1689975 小时前
el-tree选中数据重组成树
javascript·vue.js·elementui
mosquito_lover16 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt