vue改启动路径不生效怎么解决
- PHPz原创
- 2023-04-13 10:44:101259浏览
近期在使用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项目的入口文件，我们可以在其中使用<%= 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.js文件中做一个设定。在实际项目中，配置正确的启动路径将会是非常重要的一步。
以上是vue改启动路径不生效怎么解决的详细内容。更多信息请关注PHP中文网其他相关文章！