# 构建与发布

# 构建

当项目开发完毕,只需要运行一行命令就可以打包你的应用:

# 打包正式环境
yarn build
# or 
npm run build
1
2
3
4

构建打包成功之后,会在根目录生成 dist 文件夹,里面就是构建打包好的文件,通常是 ***.js***.cssindex.html 等静态文件。

如果需要自定义构建,比如指定 dist 目录等,则需要通过 /vite.config.ts 进行配置,详情请参考vite官方文档 (opens new window)

# 发布

对于发布来讲,只需要将最终生成的静态文件,也就是通常情况下 dist 文件夹的静态文件发布到你的 cdn 或者静态服务器即可,需要注意的是其中的 index.html 通常会是你后台服务的入口页面,在确定了 js 和 css 的静态之后可能需要改变页面的引入路径。

TIP

部署时可能会发现资源路径不对 ,只需修改 /vite.config.ts 文件资源路径即可。

base: './' //请根据自己路径来配置更改
1

# 前端路由与服务端的结合

项目中,前端路由使用的是 vue-router,所以你可以选择两种方式:browserHistoryhashHistory

两者的区别简单来说是对路由方式的处理不一样,hash 是以 # 后面的路径进行处理,通过 HTML 5 History (opens new window) 进行前端路由管理,而 browser 则是类似我们通常的页面访问路径,并没有 #,但要通过服务端的配置,能够访问指定的 url 都定向到当前页面,从而能够进行前端的路由管理。

本项目默认使用的是 hashHistory ,所以如果你的 url 里有 #,想去掉的话,需要切换为 browserHistory。 修改 @/config/routes.ts 中的 createWebHashHistorycreateWebHistory 即可

const router = createRouter({
  scrollBehavior(/* to, from, savedPosition */) {
    return { top: 0 }
  },
  //history: createWebHashHistory(import.meta.env.BASE_URL),
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: routes as any,
});
1
2
3
4
5
6
7
8

如果你使用的是静态站点,那么使用 browserHistory 可能会无法访问你的应用,因为假设你访问 http://localhost:3000/home,那么其实你的静态服务器并没有能够映射的文件,而使用 hashHistory 则不会有这个问题,因为它的页面路径是以 # 开始的,所有访问都在前端完成,如:http://localhost:3000/#/home/

不过如果你有对应的后台服务器,那么我们推荐采用 browserHistory,只需要在服务端做一个映射,比如:

Apache

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>
1
2
3
4
5
6
7
8

nginx

location / {
  try_files $uri $uri/ /index.html;
}
1
2
3

TIP

更多配置请查看 Vue-router4.x (opens new window)