1. 程式人生 > >vue 打包釋出去#和頁面空白問題

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 打包釋出javadocjavasource設定忽略報錯

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安卓的debugrelease版本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;