鍍金池/ 問答/HTML/ vue-cli打包后 運(yùn)行index.html 圖片都不顯示

vue-cli打包后 運(yùn)行index.html 圖片都不顯示

圖片描述

assetsRoot: path.resolve(__dirname, '../dist'),

assetsSubDirectory: 'static',
assetsPublicPath: './',

assetsPublicPath: './', 緩存assetsPublicPath: '/', 也不行

回答
編輯回答
尤禮

1、找到 config->index.js里面，如下修改 assetsPublicPath: './', (build)
2、找到 build->utils.js,在里面加入一句publicPath:’../../’,

==============
這樣解決的

2018年1月31日 10:53
編輯回答
莓森

剛剛處理了這個(gè)問題，解決方式是用nginx做代理

upstream server-api{
    # api 代理服務(wù)地址
    server 127.0.0.1:8888;
}
server {

    listen 80;

    server_name localhost;
    root /var/www/blog_vue/dist;
    index index.php index.html index.htm;

    location / {
         try_files $uri $uri/ /index.php$is_args$args;
    }

    location ^~/api/ {
        proxy_pass http://server-api/;
    }

    location ^~/storage/ {
        proxy_pass http://server-api/storage/;
    }
}

我的后端是放在localhost:8888上，圖片也是放在服務(wù)器上，配置里面storage就是將vue的圖片路徑代理到服務(wù)器上

2018年3月25日 12:30
編輯回答
初念

因?yàn)閖s變量保存的路徑，圖片沒有經(jīng)過webpack打包，在你引入圖片路徑的地方，稍微修改一下：
const imgUrl = require('src中的圖片的路徑')，應(yīng)該就沒問題了

2018年9月12日 01:57
編輯回答
莫小染

打包后的文件需要部署到服務(wù)器上才可以，直接打開dist目錄下的index.html是不行的。

2017年3月11日 20:11
編輯回答
奧特蛋

打包后的目錄不能直接訪問，需要使用假域名代理

2017年1月20日 21:07
編輯回答
雅痞

雖然你用webpack打包了環(huán)境，但是你現(xiàn)在的環(huán)境還是本地環(huán)境，直接打開index.html是不行的。
1、全局安裝anywhere，使用命令行

npm install anywhere -g

2、編譯生產(chǎn)環(huán)境

npm run build

3、好了，現(xiàn)在根目錄會多出一個(gè)dist文件夾，這就是編譯打包生成的靜態(tài)資源文件
在dist文件夾下執(zhí)行命令：

anywhere

這時(shí)候會搭建一個(gè)本地的服務(wù)器，本機(jī)ip地址+端口

clipboard.png

2017年4月28日 16:53