前端——通过Vue打包上线需要注意事项

1.静态资源路径

在vue.config.js中添加： publicPath: "./",

module.exports = defineConfig({
  //设置静态资源路径，一般是打包上线后用的
  publicPath: "./",
})

2.注意路由配置模式

（1）两种模式：hash、history

（2）vue-router3x中与vue-router4x中的设置方式不一样

vue-router3x中，通过modle设置

modle：hash
modle：history

vue-router4x中，通过createWebHashHistory / createWebHistory

import { createRouter, createWebHistory,createWebHashHistory } from 'vue-router'
const routes = [
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/login/index.vue')
  }
]
const router = createRouter({
  history： createWebHashHistory(process.env.BASE_URL)
  //history：createWebHistory(process.env.BASE_URL)
  routes
})

export default router

Vue-Router 4.x_猫老板的豆的博客-CSDN博客_vue-router4.x

3.Vue-router使用history模式，

开发环境下，不能配置静态资源路径；

生产环境下，必须配置静态资源路径；

4.Vue-router使用hash模式

开发环境/生产环境，都需要配置静态资源路径