vue의 시작 경로 변경이 적용되지 않는 문제를 해결하는 방법
- PHPz원래의
- 2023-04-13 10:44:101209검색
최근 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!