【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应用的方式,选择哪种方式根据实际情况和需求来定。

相关推荐
腾讯TNTWeb前端团队6 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰9 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪9 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy10 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom11 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom11 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom11 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom11 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom11 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试