vue中history模式的修改 - webxue的小破站

环境变量

我们在项目根目录下新建 .env 文件

# .env

# 项目名称
WEBXUE_NAMR=aaa

1. vue3 + vite

1.1 vite.config.ts

然后可以在 vite.config.ts 通过 loadEnv 来读取 env 文件

// vite.config.ts
import { loadEnv } from 'vite';

export default ({ mode }) => {
  // 读取env环境变量
  // 第一个参数传mode，是个字符串，如development、production
  // 第二个参数是env路径，由process.cwd() 获取
  // 第三个参数为返回的变量前缀，也就是说只有 WEBXUE 开头的变量才会被返回
  const env = loadEnv(mode,process.cwd(),"WEBXUE")

  return defineConfig({
    base:`/${env.WEBXUE_NAME}/`,
    // 当需要引用 public/static/xxx.js 时
    // 就在index.html中引入 <script src="/static/xxx.js"></script>
    publicDir:"./public",
    // ...
  })
}

1.2 配置history路由

// router.ts
const router = createRouter({
  // 不再是通过base设置，而是设置createWebHistory的参数
  // 这里的import.env.BASE_URL就是vite.config.ts配置的base
  history: createWebHistory(import.env.BASE_URL),
  routes,
})

1.3 注意

提示某些资源404？
检查你引入这些资源的地方，如果是绝对路径引入，需要修改为相对路径。如：/static/a.jpg ===> ./static/a.jpg

vue2 + webpack

ip:端口/nginx前缀/项目路由

2.1 vue.config.js

在 vue.config.js 修改如下代码

// vue.config.js
module.exports = defineConfig({
  // 静态资源路径
  assetsDir:"./",
  // nginx前缀
  publicPath: '/xxx/'
})

new VueRouter({
    // nginx前缀
    base:'/xxx/',
    // history模式
    mode:'history',
    routes
})