vue-cli打包后 运行index.html 图片都不显示

Question

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

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

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

Answer 1

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

==============
这样解决的

Answer 2

打包后的文件需要部署到服务器上才可以，直接打开dist目录下的index.html是不行的。

Answer 3

因为js变量保存的路径，图片没有经过webpack打包，在你引入图片路径的地方，稍微修改一下：
const imgUrl = require('src中的图片的路径')，应该就没问题了

Answer 4

打包后的目录不能直接访问，需要使用假域名代理

Answer 5

刚刚处理了这个问题，解决方式是用nginx做代理

upstream server-api{
    # api 代理服务地址
    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上，图片也是放在服务器上，配置里面storage就是将vue的图片路径代理到服务器上

Answer 6

虽然你用webpack打包了环境，但是你现在的环境还是本地环境，直接打开index.html是不行的。
1、全局安装anywhere，使用命令行

npm install anywhere -g

2、编译生产环境

npm run build

3、好了，现在根目录会多出一个dist文件夹，这就是编译打包生成的静态资源文件
在dist文件夹下执行命令：

anywhere

这时候会搭建一个本地的服务器，本机ip地址+端口