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

冰霜
  • 358

图片描述

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

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

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

回复
阅读 3.3k
6 个回答
✓ 已被采纳

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

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

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

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

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

刚刚处理了这个问题,解决方式是用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的图片路径代理到服务器上

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

npm install anywhere -g

2、编译生产环境

npm run build

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

anywhere

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

clipboard.png

宣传栏