vue2静态网站使用vue-cli打包以及github部署

原创已于 2024-10-24 22:04:09 修改 · 1.1k 阅读

27 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

VUE

于 2024-10-24 22:03:17 首次发布

1.首先使用vue2创建一个项目需要进行如下步骤：

1.1安装 Node.js 和 npm/yarn：

1.2.创建新项目：

1.3 npm run serve

2.进行项目打包

问题1： router-view中的内容显示不出来，路由history模式。

1.首先使用vue2创建一个项目需要进行如下步骤：

window+R打开命令行输入cm的，或者在文件里面直接输入cmd再按回车

1.1安装 Node.js 和 npm/yarn：

确保你的开发环境中安装了最新版本的 Node.js，以及 npm 或 yarn 包管理器。

安装 Vue CLI： Vue CLI 是 Vue 的官方命令行工具，用于快速创建 Vue 项目。通过以下命令全局安装 Vue CLI：

终端：

npm install -g @vue/cli

1.2.创建新项目：

使用 Vue CLI 创建新项目。运行以下命令并按照提示操作：

终端：

vue create my-project

其中 my-project 是你项目的名称。如创建项目my_project：

选择vue2回车创建：

创建成功显示如下：

1.3 npm run serve

然后按顺序执行下面两条指令，可以运行查看创建的项目：

cd my_project(也就是你的项目名)   //进入项目文件夹
npm run serve    //运行

会生成：

点击可在浏览器查看。

使用vscode打开查看

至此项目创建完毕。

2.进行项目打包

对项目执行npm run build 命令即可打包，打包后会生成一个dist文件夹，这个文件夹里面包括js,css,html和一些静态资源文件，dist文件夹下就是需要部署的项目。

但此时的index.html文件打开会是一片空白，这是由于没有修改config配置文件，如果直接打包，系统默认的是'/'(根目录)，而不是'./'，（当前目录），从而导致路径不对，页面加载不出来。

我们需要在自己vue.config.js目录中添加以下代码，然后再重新打包即可。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true，
  //部署应用包时的基本路径
  publicPath:'./',
  //打包时输出文件目录
  outputDir:'dist',
  //可写可不写，写的话js,css等文件会存在这个文件夹里面,放置静态文件夹目录
  assetsDir:'static'

})

vue.config.js相关配置文件内容：

module.exports = {
 
  productionSourceMap: false,// 生产环境是否要生成 sourceMap
 
  publicPath: './',  //   部署应用包时的基本 URL
 
  outputDir: 'dist',  //   打包时输出的文件目录
 
  assetsDir: 'assets',  //   放置静态文件夹目录
 
  devServer:{},// dev环境下，webpack-dev-server 相关配置
 
  lintOnSave: false,//是否在开发环境下每次保存代码时都启用 eslint验证
 
  css:{},// css的处理
 
  chainWebpack：config=>{} //vue-cli内部的webpack配置
 
  pluginOptions:{},// 可以用来传递任何第三方插件选项
 
  }

问题1： router-view中的内容显示不出来，路由history模式。

这个坑是当你使用了路由之后，在没有后端配合的情况下就手贱打开路由history模式的时候，打包出来的文件也会是一片空白的情况，

很多人踩这个坑的时候花了很多时间，网上的教程基本上都是说的第一个坑，这个坑很少有人提起。

解决：// mode: ‘history’,//将这个模式关闭就好

问题2：音频文件播放不了

打包之前还能播放，打包之后就播放不了，我感觉是路径解析的问题，网上找的解决办法我不太理解。如果有相似经历的小伙伴可以试试。链接如下：

vue中添加mp3音频文件，无法播放？ - YoYo/切克闹 - 博客园

我最后都没有解决这个问题，最终音乐资源链接直接用的外链地址，有大佬懂的话可以分享一下。使用插件获取外链地址。

3.github部署

由于网站只是个静态小网页，不值得花钱买个云服务器部署，所以就使用的github,也可以使用码云，不过在这里以github为主

步骤如下：

1.安装git

2.新建仓库Repository

3.克隆仓库

4.上传

3.1安装git

这里分享别人写的教程：

【github新手用法详解（建议收藏！！！） - CSDN App】github新手用法详解（建议收藏！！！）-CSDN博客

3.2新建仓库repository

打开GitHub官网，右上角新建仓库（New repository）。

假如你的用户名是AAA，就把仓库名(Repository name)设为AAA.github.io

勾选Pubilc，因为private要收费。如果项目中没有readme文件，就勾选一下"Add a README file"。然后就点Create repository就行了

3.3克隆仓库

然后按如下图步骤，点击Code，然后选SSH。复制该SSH代码。

创建成功后，自己找一个文件夹，在空白位置右键，点显示更多选项，选择Git Bash here（需要提前安装好Git工具，才会有这个按钮）

打开了Git界面后，输入git clone 右键粘贴刚刚复制的SSH代码。回车。(git界面点击右键选择paste即可粘贴)

git clone (ssh)

然后就看到多了一个文件夹，就是刚刚git clone克隆下来的项目。接下来，把需要部署的项目的dist文件夹内所有文件复制粘贴到刚刚克隆下来的那个文件夹内。

3.4上传

回到Git界面，依次输入以下命令：

cd AAA.github.io
git add .
git commit -m ‘第一次上传’
git push

刷新GitHub页面，可以看到GitHub上出现了dist文件夹内的所有文件即可。

最后，在仓库的setting中的Pages中可以看到生成的网址，把网址发给别人来浏览也是可以的。

这里分享两个我之前随便弄得网站：

治愈心灵

甜心理

以上若存在错误，欢迎指正。

标签

#1024程序员节 #github #vue.js