vue改启动路径不生效怎么解决-前端问答-PHP中文网

vue改启动路径不生效怎么解决

PHPz

发布： 2023-04-13 10:44:10

原创

1728人浏览过

近期在使用vue框架进行开发时，遇到了一个问题，即修改vue项目的启动路径后并没有生效，一直还是默认访问的localhost:8080而非自定义的路径。经过一番探究和实验，我找到了解决此问题的方法，并写下了此文，希望能帮助到更多遇到相同问题的开发者。

首先，我们来了解一下Vue项目的默认启动路径。在Vue项目中，我们通过使用vue-cli脚手架生成的基础模板，生成的项目结构如下：

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

登录后复制

其中，public文件夹下的index.html是Vue项目的入口文件，我们可以在其中使用变量来表示项目的根路径。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文件中的

标签，我们可以添加如下代码：