资讯专栏INFORMATION COLUMN

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

whatsns / 808人阅读

摘要:在使用的时候,使用非子目录需要在中添加如下代码但是完后,放在服务下,会看到如下报错,页面也显示的内容网上找了很多,并没有找到答案。后来发现是用了模式,但是并没有添加相应的配置便会出现这个问题。

在使用 vue-cli3 build的时候,使用非子目录需要在 vue.config.js 中添加如下代码:

module.exports = {
  baseUrl: process.env.NODE_ENV === "production" ? "/dist/" : "/",
}

但是build完后,放在nginx服务下,会看到如下报错,页面也显示 no-script 的内容

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

网上找了很多,并没有找到答案。后来发现 vue-router 是用了 history 模式,但是 nginx 并没有添加相应的配置便会出现这个问题。所以,如下解决方案:
1.变更生产环境配置,使得支持 history 模式。这里只需要修改 nginx 的配置,把 404 指向 index.html 即可。
2.不在使用history模式

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/96218.html

相关文章

  • vue-cli3下的vue.config.js配置文件

    摘要:现在官方已经升级到版本了,精简很多文件,其中包括没有了中的目录,所以需要更改之前中中相关的配置文件,需要在项目根目录下新建文件来写。 现在官方vue-cli已经升级到3版本了,精简很多文件,其中包括没有了cli2中的config目录,所以需要更改之前cli2中config中相关的配置文件,需要在cli3项目根目录下新建文件vue.config.js来写。本着拿来主义在网上找来的配置都有...

    ingood 评论0 收藏0
  • vue-cli3脚手架的使用和相关配置

    摘要:前言通过搭建交互式的项目脚手架。通过快速开始零配置原型开发。与此同时,它也为每个工具提供了调整配置的灵活性,无需。例如,如果你的应用被部署在,则设置为。我们将在下篇文章里详细讲述的使用官方文档 前言 通过 @vue/cli 搭建交互式的项目脚手架。通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。一个运行时依赖 (@vue/cli-se...

    Sanchi 评论0 收藏0
  • vue-cli3脚手架的使用和相关配置

    摘要:前言通过搭建交互式的项目脚手架。通过快速开始零配置原型开发。与此同时,它也为每个工具提供了调整配置的灵活性,无需。例如,如果你的应用被部署在,则设置为。我们将在下篇文章里详细讲述的使用官方文档 前言 通过 @vue/cli 搭建交互式的项目脚手架。通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。一个运行时依赖 (@vue/cli-se...

    jsummer 评论0 收藏0
  • vue-cli3 配置开发-测试环境

    摘要:实现输入一行命令,执行两条指令,分别打包线上生产环境和线上测试环境的代码。这样配置好之后,只要执行,它会自动先执行正式环境构建打包,完成之后再自动执行测试环境的构建打包,是方便接着再配置自动压缩,这里就需要使用到一个的插件。 需求 首先介绍一下本项目的背景,是基于 vue-cli3.1.1 的单页应用,目前测试环境和生产环境都在线上,并且都在同一个域名下,其中生产环境部署在根目录下,测...

    Scott 评论0 收藏0
  • 前端开发之走进Vue.js

    摘要:作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。的新版本,的简称。的包管理工具,用于同一管理我们前端项目中需要用到的包插件工具命令等,便于开发和维护。 Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。本文旨在帮助大家认识Vue.js,了解Vue.js的开发流程,并进一步理解如何通...

    zxhaaa 评论0 收藏0

发表评论

0条评论

whatsns

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<