[绍棠] Ant Design Pro of Vue打包有前缀静态资源访问不到

最新推荐文章于 2024-08-24 09:07:37 发布

原创最新推荐文章于 2024-08-24 09:07:37 发布 · 710 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #anti-design-vue

前端专栏收录该内容

38 篇文章

订阅专栏

本文介绍了两种在Vue项目中管理URL路径的方法，包括使用环境变量定义前缀、配置路由和公共路径，以及部署时与nginx的配合。历史模式和hash模式的切换可能导致静态资源访问问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一

缺点：需要和部署的路径保持一致，不是很灵活

1、在环境变量.env中定义url前缀

BASE_URL=/admin/

2、定义vue路由前缀路径router/index.js

const createRouter = () =>
  new Router({
    mode: 'history',
    base: process.env.BASE_URL,
//    mode: 'hash',
    routes: constantRouterMap
  })

.........

3、vue配置公共路径前缀vue.config.js

const vueConfig = {

 //  publicPath: process.env.NODE_ENV === "development" ? "/" : "./",
  publicPath: process.env.BASE_URL,
  outputDir:'dist',

  .........

4、打包部署到nginx或其他中间件，此时要保证前缀和部署的前缀保持一致

nginx

location /admin/ {
		index index.html index.htm;
		try_files $uri $uri/ /admin/index.html;
}

方法二

1、使用history模式

2、定义vue路由前缀路径router/index.js

3、vue配置公共路径前缀vue.config.js

// publicPath: process.env.NODE_ENV === 'development' ? '/' : './', // history改为 ’./‘ ,hash模式要’/‘,使用这种方法会导致图片无法加载以及一些其他问题

开发环境使用/,部署到服务器上使用./

这种能保证静态资源能访问到，但是图片访问又有问题，需要再调整，比较麻烦，还会产生其它问题，history和hash模式配置还不一样