vue의 시작 경로 변경이 적용되지 않는 문제를 해결하는 방법-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

vue의 시작 경로 변경이 적용되지 않는 문제를 해결하는 방법

PHPz

Apr 13, 2023 am 10:44 AM

최근 Vue 프레임워크를 사용하여 개발할 때 문제가 발생했습니다. 즉, Vue 프로젝트의 시작 경로 수정이 적용되지 않았습니다. 기본 액세스 localhost:8080이 항상 사용자 정의 경로 대신 사용되었습니다. 몇 가지 연구와 실험 끝에 저는 이 문제에 대한 해결책을 찾았고, 같은 문제를 겪는 더 많은 개발자에게 도움이 되기를 바라며 이 글을 썼습니다.

먼저 Vue 프로젝트의 기본 시작 경로를 살펴보겠습니다. Vue 프로젝트에서는 vue-cli 스캐폴딩으로 생성된 기본 템플릿을 사용합니다. 생성된 프로젝트 구조는 다음과 같습니다. vue-cli脚手架生成的基础模板，生成的项目结构如下：

projectName
│   package-lock.json
│   package.json
│   README.md
│
├───public
│       favicon.ico
│       index.html
│
└───src
        App.vue
        main.js

로그인 후 복사

其中，public文件夹下的index.html是Vue项目的入口文件，我们可以在其中使用<%= BASE_URL %>变量来表示项目的根路径。Vue的默认模式是基于/路径进行启动，也就是localhost:8080/。当我尝试在vue.config.js文件中修改此默认路径后，却一直没有生效。

按照Vue官方文档上的介绍，在vue.config.js文件中应该添加如下代码：

module.exports = {
    publicPath: '/newpath/'
}

로그인 후 복사

这样便可以将项目的启动路径修改为localhost:8080/newpath/。但是，经过实验，这种方法在我们的项目中并没有生效，原因是我们的项目使用了二级域名进行访问，例如http://myproject.example.com，而非http://example.com/myproject的路径访问方式。

因此，我们需要在public文件夹下的index.html中手动添加项目的根路径。找到index.html文件中的<head>标签，我们可以添加如下代码：

<base href="/newpath/">

로그인 후 복사

这里的/newpath/就是我们自定义的启动路径。这样，无论我们如何修改vue.config.js文件中的publicPath，都能够正确地访问到项目。同时，我们也可以把路径改为/，这样我们就能够通过二级域名的方式来访问项目。

总之，无论是在何种方式下，修改Vue项目的启动路径都需要我们手动设置，而非仅仅在vue.config.jsrrreee

그 중 public 아래의 <code>입니다. code> 폴더 index.html는 Vue 프로젝트의 항목 파일이며, 여기서 <%= BASE_URL %> 변수를 사용하여 프로젝트의 루트 경로를 나타낼 수 있습니다. Vue의 기본 모드는 / 경로(localhost:8080/)를 기반으로 시작하는 것입니다. vue.config.js 파일에서 이 기본 경로를 수정하려고 했지만 적용되지 않았습니다. 🎜🎜공식 Vue 문서의 소개에 따르면, vue.config.js 파일에 다음 코드를 추가해야 합니다: 🎜rrreee🎜이 방법으로 프로젝트의 시작 경로를 수정할 수 있습니다. localhost:8080/newpath/로. 그러나 실험 후 이 방법은 우리 프로젝트에서 적용되지 않았습니다. 그 이유는 우리 프로젝트가 대신 http://myproject.example.com과 같은 두 번째 수준 도메인 이름을 사용하기 때문입니다. http://example.com/myproject의 경로 액세스 방법입니다. 🎜🎜따라서 public 폴더 아래 index.html에 프로젝트의 루트 경로를 수동으로 추가해야 합니다. index.html 파일에서 <head> 태그를 찾으세요. 다음 코드를 추가할 수 있습니다: 🎜rrreee🎜The /newpath/ 여기에 우리는 맞춤형 시작 경로를 제공합니다. 이렇게 하면 vue.config.js 파일의 publicPath를 어떻게 수정하더라도 프로젝트에 올바르게 접근할 수 있습니다. 동시에 경로를 /로 변경하여 2차 도메인 이름을 통해 프로젝트에 액세스할 수도 있습니다. 🎜🎜간단히 말하면 Vue 프로젝트의 시작 경로를 어떻게 수정하더라도 vue.config.js 파일에서 설정하는 것이 아니라 수동으로 설정해야 합니다. 실제 프로젝트에서는 올바른 시작 경로를 구성하는 것이 매우 중요한 단계입니다. 🎜

위 내용은 vue의 시작 경로 변경이 적용되지 않는 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.