vue-cli3 使用子目錄部署問題

whatsns 發(fā)布于2019-08-22 18:48 / 900人閱讀

摘要：在使用的時候，使用非子目錄需要在中添加如下代碼但是完后，放在服務(wù)下，會看到如下報(bào)錯，頁面也顯示的內(nèi)容網(wǎng)上找了很多，并沒有找到答案。后來發(fā)現(xiàn)是用了模式，但是并沒有添加相應(yīng)的配置便會出現(xiàn)這個問題。

在使用 vue-cli3 build的時候，使用非子目錄需要在 vue.config.js 中添加如下代碼：

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

但是build完后，放在nginx服務(wù)下，會看到如下報(bào)錯，頁面也顯示 no-script 的內(nèi)容

[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.

網(wǎng)上找了很多，并沒有找到答案。后來發(fā)現(xiàn) vue-router 是用了 history 模式，但是 nginx 并沒有添加相應(yīng)的配置便會出現(xiàn)這個問題。所以，如下解決方案：
1.變更生產(chǎn)環(huán)境配置，使得支持 history 模式。這里只需要修改 nginx 的配置，把 404 指向 index.html 即可。
2.不在使用history模式

GPU云服務(wù)器云服務(wù)器 vue-cli3 python 3問題 vue-cli 使用問題

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/96218.html

相關(guān)文章

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

摘要：現(xiàn)在官方已經(jīng)升級到版本了，精簡很多文件，其中包括沒有了中的目錄，所以需要更改之前中中相關(guān)的配置文件，需要在項(xiàng)目根目錄下新建文件來寫。現(xiàn)在官方vue-cli已經(jīng)升級到3版本了，精簡很多文件，其中包括沒有了cli2中的config目錄，所以需要更改之前cli2中config中相關(guān)的配置文件，需要在cli3項(xiàng)目根目錄下新建文件vue.config.js來寫。本著拿來主義在網(wǎng)上找來的配置都有...

ingood 2019-08-26 12:10 評論0 收藏0
vue-cli3腳手架的使用和相關(guān)配置

摘要：前言通過搭建交互式的項(xiàng)目腳手架。通過快速開始零配置原型開發(fā)。與此同時，它也為每個工具提供了調(diào)整配置的靈活性，無需。例如，如果你的應(yīng)用被部署在，則設(shè)置為。我們將在下篇文章里詳細(xì)講述的使用官方文檔前言通過 @vue/cli 搭建交互式的項(xiàng)目腳手架。通過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發(fā)。一個運(yùn)行時依賴 (@vue/cli-se...

Sanchi 2019-08-26 10:22 評論0 收藏0
vue-cli3腳手架的使用和相關(guān)配置

摘要：前言通過搭建交互式的項(xiàng)目腳手架。通過快速開始零配置原型開發(fā)。與此同時，它也為每個工具提供了調(diào)整配置的靈活性，無需。例如，如果你的應(yīng)用被部署在，則設(shè)置為。我們將在下篇文章里詳細(xì)講述的使用官方文檔前言通過 @vue/cli 搭建交互式的項(xiàng)目腳手架。通過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發(fā)。一個運(yùn)行時依賴 (@vue/cli-se...

jsummer 2019-08-30 15:44 評論0 收藏0
vue-cli3 配置開發(fā)-測試環(huán)境

摘要：實(shí)現(xiàn)輸入一行命令，執(zhí)行兩條指令，分別打包線上生產(chǎn)環(huán)境和線上測試環(huán)境的代碼。這樣配置好之后，只要執(zhí)行，它會自動先執(zhí)行正式環(huán)境構(gòu)建打包，完成之后再自動執(zhí)行測試環(huán)境的構(gòu)建打包，是方便接著再配置自動壓縮，這里就需要使用到一個的插件。需求首先介紹一下本項(xiàng)目的背景，是基于 vue-cli3.1.1 的單頁應(yīng)用，目前測試環(huán)境和生產(chǎn)環(huán)境都在線上，并且都在同一個域名下，其中生產(chǎn)環(huán)境部署在根目錄下，測...

Scott 2019-08-26 13:48 評論0 收藏0
前端開發(fā)之走進(jìn)Vue.js

摘要：作為目前最熱門最具前景的前端框架之一，其提供了一種幫助我們快速構(gòu)建并開發(fā)前端項(xiàng)目的新的思維模式。的新版本，的簡稱。的包管理工具，用于同一管理我們前端項(xiàng)目中需要用到的包插件工具命令等，便于開發(fā)和維護(hù)。 Vue.js作為目前最熱門最具前景的前端框架之一，其提供了一種幫助我們快速構(gòu)建并開發(fā)前端項(xiàng)目的新的思維模式。本文旨在幫助大家認(rèn)識Vue.js，了解Vue.js的開發(fā)流程，并進(jìn)一步理解如何通...

zxhaaa 2019-08-20 15:20 評論0 收藏0