vue 打包釋出去#和頁面空白問題
1.vue專案中config檔案下index.js中打包配置
build: {
// Template for index.html
index: path.resolve(__dirname, '../yiTownWebApp/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../yiTownWebApp'),
assetsSubDirectory: 'static',
assetsPublicPath: '/yiTownWebApp/',//這個地方使用絕對路徑很重要
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
2.路由配置:router資料夾下index.js
export default new Router({
mode: 'history',//去掉#,
base: '/yiTownWebApp/',//這個配置也很重要,否則會出現頁面空白情況
scrollBehavior: () => ({ y: 0 }),
routes: [
{
path: '/article',
name: 'article',
component: article
},
{
path: '/footMark',
name: 'FootMark',
component: FootMark
},
{
path: '/shareFootMark',
name: 'ShareFootMark',
component: ShareFootMark
}
]
})
nginx配置:
server {
listen 8080;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
#打包後的專案目錄,一定記住這個地方帶有專案名稱
root /Users/a123/Desktop/vue/sgAdmin/yiTownWebApp;
index index.html;
location /yiTownWebApp{
#這個地方沒有專案名稱,因為請求的時候如果請求:http://localhost:8080/yiTownWebApp,nginx會查詢/Users/a123/Desktop/vue/sgAdmin/yiTownWebApp/目錄下的資料
root /Users/a123/Desktop/vue/sgAdmin;
try_files $uri $uri/ @router;
index index.html;
}
//try_files $uri $uri/ @router;和下邊部分很重要,沒有這部分發布二級一下的路由會出現js載入,但是也沒空白的情況
location @router {
rewrite ^.*$ /index.html last;
}
}
相關推薦
vue 打包釋出去#和頁面空白問題
1.vue專案中config檔案下index.js中打包配置 build: { // Template for index.html index: path.resolve(__dirname
vue打包到伺服器,頁面顯示空白
此篇講解下這個報錯問題,這個坑花費了一天時間才解決,好氣呀~ vue專案本地執行npm run dev沒問題,但在打包完npm run build伺服器上執行頁面一片空白,指出來最外層的div,一開始以為是路由的寫法有問
解決vue打包上線後一片空白問題
打包後用瀏覽器開啟html檔案,很糟糕出現了空白頁 然後我們檢視控制檯報錯資訊,我們知道是html頁並沒有成功引入打包後的專案檔案 然後我們開啟html檔案,並對程式碼進行整理,修改引入檔案的路徑為“./static”,然後再用瀏覽器開啟HTM
VUE打包釋出後無法訪問js、css資源
在vue開發中,本地測試以及測試環境中都沒有遇到問題,當釋出生產,有虛擬路徑時,便出現js、css均報錯404; 首先在config的index.js檔案中,將assetsPublicPath修改為'./',如下圖; 然而打包釋出後發現放在assets資料夾中的圖片資源又報404,觀察
maven 打包釋出javadoc和javasource設定忽略報錯
maven 打包釋出javadoc和javasource 專案deploy到中心倉庫,會要求檢查javadoc和javasource檔案的完整性,而這時候程式碼上如果少了javadoc的註釋,在stage close的時候就會失敗,因此我們需要在pom檔案中新
vue打包靜態資源後顯示空白及static檔案路徑報錯填坑
今天使用vue打包(npm run build)遇到了幾個坑,在這裡分享給大家 打包之後開啟dist的頁面顯示空白: 這個問題以前就處理過,是打包過程中出現錯誤頻率較高的一種,可能有3處地方會出現這種情況 1、記得改一下config下面的index.js中bulid模組
vue使用webPack打包釋出後頁面顯示空白
今天筆者將打包後,進行訪問,訪問到index.html,但是出現的是空白頁。打包命令:npm run build,打包後的檔案如下:這是因為index.html中引入的css ,js 的路徑不對:如下圖這個是因為webpack打包的時候引入js時使用的是絕對路徑導致的,修改w
vue打包頁面空白(最完美的解決辦法)
vue打包頁面空白,什麼都不顯示(解決) 當打完包的時候,可以看到它提示一句話 Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won’t
vue專案打包之後頁面空白解決辦法
之前專案遇到個情況,npm run build打包之後上傳到伺服器後,index.html開啟一片空白,資源都載入了,但是就是不顯示。 然後百度找了原因,修改了兩處地方 一、修改 assetsPublicPath 在config/index.js裡面,有個 assetsPublicPath
vue打包後頁面顯示空白如何處理
vue打包後頁面顯示空白如何處理 1、當用vue-cli自動構建專案後,有兩種執行方法,分別是: npm run dev :執行專案 npm run build : 打包專案,資源使用相對路徑,所以會出現路徑錯誤問題。 參考:http
vue2打包釋出,vue-router進行build無法正常顯示路由頁面
npm run dev檢視沒有問題npm run build打包起一個服務(例如:python -m SimpleHTTPServer)然後檢視index.html頁面,發現路由會請求/first頁面。解決的辦法:將路由配置中history改為hash,將連結中/first改為/#/first。問題解決。
vue-cli 3.0 建立的專案,dev下能執行,打包後報錯,頁面空白
dev下執行時正常的,但在打包後就不正常了,如下圖報各種檔案找不到,原因是在html引入的img,js或css的路徑不對,如下:<link as=style href=/css/app.f9f2eaa0.css rel=preload> <link as=s
Vue history/hash模式打包頁面空白處理
相信很多新手在history/hash模式下被坑的很慘,處理history模式下頁面打包空白,經測試ok export default new Router({ mode: 'history', // history模式 base: '/test', //專案
vue項目打包後頁面空白
pbo oui idg ssis iii dir conf 分享圖片 uia 原因:打包後的dist目錄下的文件引用路徑不對,會因找不到文件而報錯導致白屏。 解決辦法:修改一下config下面的index.js中bulid模塊導出的路徑。因為index.html裏邊的內容
07 . 前端工程化(ES6模組化和webpack打包css,less,scss,圖片,字型,配置Vue元件載入器和釋出專案)
#### 模組化規範 ##### 傳統開發模式主要問題 ```go /* 1. 命名衝突 2. 檔案依賴 */ ``` `通過模組化解決上述問題` ```go /* 模組化就是把單獨的一個功能封裝在一個模組(檔案)中,模組之間相互隔離, 但是可以通過特定的介面公開內部成員,也可以
基於laravel5.4 vue 和vue-element搭建的單頁面後臺CMS
data pos dev https art .sql blog -s sql 介紹 該項目後臺是基於vue和laravel搭建的單頁面CMS系統,包含了文章管理,權限管理,用戶管理等基本模塊。 前臺使用了傳統web技術,laravel渲染搭建了個博客系統 githu
vue打包空白,圖片沒加載,背景顏色沒有渲染出來-配置秘訣
run config util CP ack round .com 開發 sets 找到config文件夾下的index.js文件修改一下位置 看清楚是 build(上邊還有個dev 是開發環境下的配置,不需要改動)下的 assetsPublicPath :將‘/’改為‘
cordova環境搭建以及將vue的webapp打包成ios和安卓的debug和release版本app
簡介 cordova可以幫我們將一個webApp打包成安卓apk和ios的App,本文詳細描述了cordova的環境搭建以及打包vue專案的webapp成手機端的App的詳細過程,打包的app分為debug版本的除錯版以及能上線的release版本,其中都會做詳細介紹,文章中會也會描述整個環節遇
vue路由設定,登入失效後跳轉到去登入頁面。登入後開啟的是你最後登入的頁面
main.js router.beforeEach((to, from, next) => { document.title=to.name; //讓頁面title顯示路由對應的name值--xlz &
vue-cli webpack打包釋出到nginx伺服器,nginx.conf配置
server { listen 80; root /var/www/web/; index index.php index.html index.htm; server_name www.web.com;