이번에는 컴파일 후 실제 프로젝트가 루트 디렉터리에 없으면 어떻게 해야 하는지 알려드리겠습니다. 컴파일 후 실제 프로젝트가 루트 디렉터리에 없으면 어떻게 해야 할까요? 사례를 살펴보겠습니다. eg. :
vue-router: 히스토리 모드 인트라넷 환경: 192.168.1.1:8080/index.html 외부 네트워크 환경: domain.com/ttsd/index.html
개발된 프로젝트는 On에 배포될 예정이므로 고객 측에서 고객이 배포를 위해 별도의 도메인 이름(또는 하위 도메인)을 사용하기를 원하지 않는 경우, 이 때 패키지 프로그램에서 일부 구성을 변경해야 합니다.
Modify구성 파일1. 패키지된 리소스 참조를 상대 경로로 변경하고 config/index.js
>assetsPublicPathbuild 속성을 찾습니다. /code>
build: { ... assetsPublicPath: './' // 未修改前的配置为 '/', }
config/index.js
中 build
属性下的 assetsPublicPath
if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath: '../../' // 修改路径 }) } else { return ['vue-style-loader'].concat(loaders) }
2、修改样式引用的资源文件(图片、视频、字体文件等)为相对路径 找到 build/utils.js
中,添加(或修改) publicPath
为 '../../'
function getAbsolutePath () { let path = location.pathname return path.substring(0, path.lastIndexOf('/') + 1) } const routers = new Router({ mode: 'history', base: getAbsolutePath(), ... })
修改路由
在路由的history模式下,所有的路由都是基于根路径的,如 /xxxx
,由于部署目录未知,所以我们可以根据 location.pathname
来获取到当前访问的文件路径,来修改路由。
vue-router里提供了一个base的属性
base类型: string
默认值: "/"
应用的基路径。例如,如果整个单页应用服务在 /app/
下,然后 base
就应该设为 "/app/"
。
修改路由代码
location / { try_files $uri $uri/ /index.html; // 需要修改为 try_files $uri $uri/ /dist/index.html; }
至此,打包配置的相关修改已全部完成,项目也能够正常访问。 但还是会有一个问题,跳转到某个路由后,刷新页面,就gg了,页面为空白,此时就要修改nginx的配置了。
修改nginx的配置
官方给的nginx配置是根目录下的,即 https://router.vuejs.org/zh-cn/essentials/history-mode.html#nginx
rrreee注: /dist
, 글꼴 파일 등)을 사용하여 를 찾습니다. 상대 경로 build/utils.js
에서 '../../'
라우팅 기록 모드에서는 모든 경로가
/xxxx
와 같은 루트 경로를 기준으로 배포 디렉터리를 알 수 없으므로 location.pathname
을 기반으로 현재 액세스하는 파일 경로를 얻어서 경로를 수정할 수 있습니다. vue-router는 기본 속성을 제공합니다
기본 유형: string
기본값: "/"
애플리케이션의 기본 경로입니다. 예를 들어 전체 단일 페이지 애플리케이션이 /app/
아래에 제공되는 경우 base
는 "/app/"
로 설정되어야 합니다.
/dist
실제 배포된 웹사이트 디렉터리에 따라 수정하세요. 개인적으로 nginx에 내장된 명령어를 통해서도 동적으로 얻을 수 있다고 생각하는데 아래에서는 잘 모르겠습니다. 🎜🎜이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 🎜🎜추천 도서: 🎜🎜🎜VuePress로 개인 웹페이지 만들기🎜🎜🎜🎜🎜화살표 키를 바인딩하여 div 이동을 제어하는 방법🎜🎜🎜위 내용은 컴파일 후 실제 프로젝트가 루트 디렉터리에 없으면 어떻게 해야 하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!