1. 程式人生 > >讓vue-cli初始化後的專案整合支援SSR 2補充

讓vue-cli初始化後的專案整合支援SSR 2補充

我在https://blog.csdn.net/young_gao/article/details/80341723 裡面使用了prerender來渲染

但是還是有坑的,那就是你改完程式碼再次打包,發現原本應該有的渲染都沒有了

這時你需要在config/index.js 裡面找到build裡面的 assetsPublicPath,並重新修改為 ./ 

assetsPublicPath:'./',

打包,再看渲染頁面的html,發現渲染已經有了。

但是可能樣式時錯亂的,這時因為路徑有點問題,你可以吧 ./改為../ 

assetsPublicPath: '../',

再次打包上傳,OK沒有問題了。

路由中  '/' 由於指向的是 '/index',所以就是外層的index渲染沒有成功,只要index資料夾裡面的index.html渲染成功了,你也是可以看到原始碼的。

記得清理一下快取

相關推薦

vue-cli初始專案整合支援SSR 2補充

我在https://blog.csdn.net/young_gao/article/details/80341723 裡面使用了prerender來渲染但是還是有坑的,那就是你改完程式碼再次打包,發現原本應該有的渲染都沒有了這時你需要在config/index.js 裡面找到

vue-cli初始一個專案

1,換成淘寶源; npm config set registry https://registry.npm.taobao.org/ 檢查是否修改成功 npm config get registry 2,安裝vue腳手架 npm install -g vue-cli 3,建一個專案 vu

使用@vue/cli初始專案

Vue CLI 的包名稱由 vue-cli 改成了 @vue/cli。 如果你已經全域性安裝了舊版本的 vue-cli (1.x 或 2.x),你需要先通過 npm uninstall vue-cli -g     解除安裝它。附上vue-cli官方文件地址 首先檢查你

vue-cli初始專案並引入ElementUI

摘要: 寫過了一個我們產品的後臺管理系統,但做完專案都沒有進行總結。感覺好多還是懵懂的感覺,所以想要重新走一遍,寫一個自己的專案。讓自己理清思路 實現: 1、首先確認你的電腦中已經安裝過Node.js了,如果沒有可以百度安裝配置 2、我們來說下安裝vue,是用vue-

關於 vue-cli 初始專案失敗的解決辦法

相信很多初學VUE的朋友很多都碰到了初始化專案報錯的情況,我也是去搜索了很多種方法來嘗試解決,不過收穫甚微,有的需要把hosts檔案還原,由於我的是更改後用來透過DNS連結google的,就沒有還原,最後只能是用了最簡單直接的辦法解決了,上圖之後我執行了①、vue init

Vue-vue-cli初始項目

try main clas cli ron http 默認 文件 導致 一、下載安裝node.js下載地址:https://nodejs.org/en/download/,選擇合適自己的版本下載,我下載的是Windows Installer (.msi) 32.bit

Vue.js之使用vue-cli初始項目

.com 所有 一個 install pro git tps img step 一、安裝步驟 step1、安裝Node.js 首先需要下載並安裝Node.js,下載地址:Node官網。 可查看我的另外一篇文章,僅作參考:Node.js入門及安裝 測試安裝是否成功,打開cmd

使用@vue/cli初始項目

格式 bpa 全面 搭建 testing 單元 sta bsp 包含 Vue CLI 的包名稱由 vue-cli 改成了 @vue/cli。 如果你已經全局安裝了舊版本的 vue-cli (1.x 或 2.x),你需要先通過 npm uninstall vue-cli

vue-cli 初始 -4058 error

提示符 原因 mod 命令提示符 技術 all http ins install 如上圖 原因:安裝初始化時沒有管理員權限 解決:進入目錄刪除node_modules,進入命令提示符以管理員身份重新運行: npm install vue-cli 初始化 -405

使用vue-cli初始vue項目

ini image 哪些 webp pro npm ejs 分享圖片 ins 在項目中使用vue我使用vue-cli腳手架搭建項目 1.先安裝nodejs 2.使用npm install -g vue-cli (建議在使用這步前先安裝nrm來切換npm的源

Vue腳手架初始專案

Vue專案初始化 在使用webpack之前,需確保安裝好環境,因為我的專案使用npm進行初始化,所以需要先配置node.js的環境,也可以使用yarn進行專案初始化 配置node環境 首先是node.js,到node的官網下載node node.js官網 在官網中下載長期支援版

vue.js初始專案

下載git 有友好的命令列工具 下載地址 https://git-for-windows.githu… 2.下載node ,安裝Node.js 下載地址:https://nodejs.org/en/ 或者 http://nodejs.cn/ 命令列輸入node -v如果輸出版本號,說明我們安裝node 環

Weex專案初始weex-iOS整合

專案初始化 1、沒有現成的工程的話新建iOS專案 命令列cd到專案根目錄 執行 pod init,會建立一個pod配置檔案 用編輯器開啟,加上 pod 'WeexSDK', :path=>'./sdk/' 下載最新的weexSDK https:

Vue-cli生成vue+webpack的專案為vue1.0版本以及端口占用問題解決辦法

Vue-cli生成1.0版本的vue+webpack的專案模板 還記得我們上篇用vue-cli構建vue專案嗎,當我們開啟elema專案中package.json的時候,發現: 也就是說,運用此種方式構建的預設是Vue2.x, npm install

vue中watch的使用時機,如何在初始再使用?

今天在做專案的時候,遇到這麼一個需求,就是當頁面切換的時候,如果當前頁面沒有改動,就彈出一個提示窗。我當時的第一反應是,這裡應該使用watch來進行觀察,再用一個變數來標識是否使用者進行了改動,程式碼如下: export default { dat

vue-cli 初始專案配置說明

初始安裝配置說明:    Project name  專案名稱(根資料夾名稱)    Project description  專案描述    Author  專案作者    Vue build  選擇Runtime+Compiler,提供loader等。選擇Runtime-

vue-cli + router生成的專案,當mode為history時,直接在url中輸入地址頁面訪問404,或者重新整理頁面404

有的時候,業務中會有一些需求,直接在其他地方,比如郵件中提供系統連結,通過點選一個url直接跳轉到我們的系統中來。 在本地開發時,直接輸入對應的url就可以訪問,但是當專案部署在伺服器之後,直接輸入url就會報錯404,這是因為router本身提供的就是一個 虛擬路徑,通過

Vue-cli 3.0 構建專案(一)構建初始專案

1. 環境配置 安裝 Vue-cli 3.0 腳手架工具 終端輸入執行 npm install -g @vue/cli 安裝完成後,輸入 vue -V 檢視是否安裝成功 新的命令語句 2. 初始化專案 終端輸入執行

vue初始

image 下載 png inf 初創 node tps .org 自動彈出 1.首先要有node.js 可以去node的官網去下載 https://nodejs.org/en/download/ 可以選擇對應的版本,最好選LTS,比較穩定,下載後安裝 在cmd,輸入no

vue-cli run build 背景圖片 css background:url('path') 載入問題

1、在webpack.prod.conf.js檔案裡output裡面新增:publicPath:'./' 2、在utils.js檔案裡新增 publicPath:'../../' 3、在config/index.js檔案裡,新增assetsPublicPath:'./'