Deploy vuejs 2 project with subfolder or no subfolder and fix refesh browser error link

1.Setup
Cập nhật vuej cli nếu có thông báo

npm i -g @vue/cli

Tạo project tên: deploy_web

vue create deploy_web

cmd sẽ hiện thị như sau:

Chọn Manually select features
Di chuyển xuống và dùng spacebar select Router, Vuex and Linter / Formatter

Tiếp theo chọn version của vuejs la 2.x

Tiếp theo Use history mode for router? chọn Y

Tiếp theo Pick a linter / formatter config chọn ESLint + Prettier

Tiếp theo Pick additional lint features chọn Lint on save

Tiếp theo Where do you prefer placing config for Babel, ESLint, etc.? chọn In dedicated config files

Tiếp theo save all of these settings as a preset. chon N

Tới đây đã là bước cuối cùng
Run project:npm run serve

2.Trường hợp deploy with root folder
Build project

npm run build

Fix lỗi f5 browser root folder
Tìm thư mục dist và copy vào root folder của xampp
Run localhost

Bạn truy cập link http://localhost/about và kết quả là:

Nếu bạn f5 để refesh browser sẽ xuất hiện lỗi:

The requested URL was not found on this server.

Cách fix lỗi:
Tạo file .htaccess với nội dung

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

F5 browser và kết quả đã thành công

3.Trường hợp deploy with subfolder
Subfoler tên là deploy_web

Edit file deploy_web\src\router\index.js

import Vue from "vue";
import VueRouter from "vue-router";
import HomeView from "../views/HomeView.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/deploy_web/",
    name: "home",
    component: HomeView,
  },
  {
    path: "/deploy_web/about",
    name: "about",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

Edit file deploy_web\src\App.vue

<template>
  <div id="app">
    <nav>
      <router-link to="/deploy_web/">Home</router-link> |
      <router-link to="/deploy_web/about">About</router-link>
    </nav>
    <router-view />
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

Edit file deploy_web\vue.config.js

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: "./"
});

Build project

npm run build

Tạo folder deploy_web ỏ xampp rồi copy tất cả các file ở folder dist vào
Fix lỗi f5 browser tạo file .htaccess

RewriteEngine On
RewriteBase /deploy_web
RewriteRule ^deploy_web/index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /deploy_web/index.html [L]