vue打包說明

1、關於頁面空白的問題

專案已經放在伺服器上了，訪問頁面出現空白，首先開啟控制檯檢視 會發現有報錯
，那麼是什麼導致的呢？！index.html引用的css、js檔案找不到。根據目錄結構進行修改index.html 引用檔案的路徑就可以了。

比如

防止在nginx/html/manage  目錄下

那麼在index.html   中的引用檔案src="/manage/static/……".
這樣就解決了空白頁面的問題。(可打包完成後手動修改)

vue的打包命令為

npm run build

修改config/index.js

build:{
    assetsPublicPath: '/xxx/'
 
,
}

在伺服器中專案名  替換xxx 進行打包

2、樣式錯誤問題修改

樣式錯誤問題修改 build/webpack.prod.conf.js檔案，針對部分樣式錯誤檢查之後沒有衝突問題。
一定首先檢查是否是 樣式衝突錯亂，改變父容器的屬性解決

new OptimizeCSSPlugin({
     /* cssProcessorOptions: config.build.productionSourceMap
        ? { safe: true, map: { inline: false } }
        : { safe: true }*/
      cssProcessorOptions: {
        safe: true
 

      }
    }),

3.去掉錨點問題:(正式環境)

路由index.js設定

model:'history',

相對應伺服器配置
nginx配置

/config/nginx.conf檔案
location /didi/ {
    try_files $uri $uri/ /didi;
}

配置之後解決訪問404的問題.

apache配置

<IfModule mod_rewrite.c>

 RewriteEngine On

 RewriteBase /

 RewriteRule ^index\.html$ - [L]

 RewriteCond %{REQUEST_FILENAME}
 
 !-f

 RewriteCond %{REQUEST_FILENAME} !-d

 RewriteRule . /index.html [L]

</IfModule>