执行 下面的命令，执行打包
yarn build / npm run build
生成一个dist 文件夹，查看dist下的index.html 后页面白屏，产生问题的原因是：文件路径没有匹配到。
下面是解决办法：
第一滴血 First Blood
项目根目录下新建：vue.config.js
/* eslint-disable prettier/prettier */
// vue.config.js
module.exports = {
publicPath: "./" // 相对路径
};
// .env.development
// VUE_APP_BASE_API=/api
Double Kill
打开 src 下的 router 文件夹下的 index.js 文件
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/about",
name: "About",
component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue")
}
];
const router = new VueRouter({
//mode: "history", // 这个注释掉，不用它 看这里
base: process.env.BASE_URL,
routes
});
export default router;
Trible Kill
运行dist 文件下的index.html 文件后，页面就如同 yarn serve 一样正常。
