解决vue-cli3 使用子目录部署问题

关于vue-cli3子目录部署问题的与解决策略

在vue-cli3的构建过程中，有时我们可能会遇到一些部署在子目录时的问题。今天，我将为大家详细介绍如何解决这一问题，希望能对大家有所帮助。

当我们在vue.config.js中添加以下代码后：

```javascript

module.exports = {

baseUrl: process.env.NODE_ENV === 'production' ? '/dist/' : '/',

}

```

在构建完成后，将其部署在nginx服务下可能会出现以下警告，并显示页面的内容为“no-script”：

```javascript

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available...

``` 这个问题往往是由于vue-router使用了history模式，而nginx并未进行相应的配置导致的。要解决这一问题，有两种主要策略：

一、修改生产环境的配置以支持history模式。只需要修改nginx的配置，将404错误重定向到index.html即可。这样就可以保持Vue Router的history模式不变。这是一种较为常用的方法，因为它不会改变Vue Router的默认配置。如果你的服务器配置无法调整或者调整起来有困难，那么可以考虑第二种方法。

二、不使用history模式。这种方法相对简单，只需要在Vue Router的配置中不使用history模式即可。但是需要注意的是，这样做可能会导致URL的样式看起来不够美观。如果服务器的配置不能修改的话，这也不失为一种选择。具体操作方法如下：在你的路由配置文件中找到以下代码：

```javascript

const router = new VueRouter({

mode: 'history', // 这里改为 'hash' 即可不使用 history 模式

...

})

```二、修改生产环境的配置以支持history模式。

在nginx服务器中部署vue应用时，确保你的nginx配置能处理Vue Router的history模式。

关于具体的nginx配置修改步骤：

请检查nginx配置文件中的相关设置是否正确，包括重定向规则以及关于请求处理的部分。

可以通过将请求路径中的未匹配部分重定向到index.html文件来解决该问题。

这是一个通用的解决方案，因为它不涉及对Vue应用程序本身的更改。

请注意确保nginx的配置正确无误。

同时请注意备份原始的nginx配置文件以防万一。

如果您不熟悉nginx的配置，建议查阅相关文档或寻求专业人士的帮助。

希望以上解决方案能够帮助您解决vue-cli3使用子目录部署的问题。

如果您还有其他疑问或问题，请随时联系我。我将尽力提供帮助。

在这里也要感谢大家对狼蚁SEO网站的支持和关注！如果有其他读者想获取更多关于vue或其他技术领域的资讯和知识分享，欢迎关注我们的网站或订阅我们的邮件推送服务。

我们将不断更新的技术资讯和教程内容供大家学习交流。感谢大家的关注和支持！让我们共同学习和进步！再次感谢大家！如果您还有其他问题或者想要获取更多帮助和资源信息，请随时联系我们。我们将竭诚为您服务！让我们一起努力解决问题，共同进步！