环境变量配置
.env.prod
JavaScript
BASE_URL='/user'
.env.sit
JavaScript
BASE_URL='/user'
代码里配置
vue.config.js
JavaScript
const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
transpileDependencies: true,
publicPath: process.env.BASE_URL,
})
router/index.js
JavaScript
import { createRouter, createWebHistory } from 'vue-router';
import routes from './router.config';
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;
nginx上配置
比如服务器上项目统一放在app目录下
打开app文件夹,一台服务器可能部署多个项目,就需要给每个项目单独命名一个文件夹,每个项目又有前后端代码。
到这里,如果我们使用的是hash路由,项目已经可以进行访问了,只是有#号,比较丑,路径为: XXXX.XXX.XX/user/#/inde...
想要去掉这个就要使用history模式,并且在nginx中进行配置,如果不配置也能访问,但是刷新后404,nginx的配置如下:
JavaScript
location /user{
alias /app/user/front/dist;
try_files $uri $uri/ /user/index.html;
autoindex on;
}
访问的方式变为: XXXX.XXX.XX/user/index (无论怎么刷新都不会有错误,这里最好还要在nginx统一配置错误页面4xx、5XX
或者在前端项目里进行路由匹配,不然访问的页面找不到或者崩溃 提示不友好,用户看不明白)。