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

原创已于 2022-11-15 17:03:33 修改 · 636 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-11-15 16:12:34 首次发布

本文详细介绍了Vue项目的静态资源路径配置，包括在vue.config.js中设置`publicPath`为`./`。同时，文章对比了Vue Router 3.x和4.x中路由模式的差异，3.x使用`mode`设置，而4.x则通过`createWebHashHistory`或`createWebHistory`创建历史模式。重点强调了在使用Vue Router的history模式时，开发环境与生产环境的配置区别，以及hash模式的一致性。对于history模式，生产环境必须配置静态资源路径，而hash模式则在任何环境下都需配置。

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_猫老板的豆的博客-优快云博客_vue-router4.x