zoukankan      html  css  js  c++  java
  • vue打包后js和css、图片不显示,引用的字体找不到问题

    vue打包后js和css、图片不显示,引用的字体找不到问题;图片一般都是背景图片。

    一、vue打包出现js和css不显示问题:

    1、不使用mode:‘history’

    2、使用mode:‘history’手动添加:

    dist包不是服务器跟目录,在index.htm里手动给js和css添加dist目录即可/dist/;

    3、或者使用mode:‘history’修改配置:

    config里面的index.js找到env: require('./prod.env')模块(新版本build: {),将下面的assetsPublicPath: '/' 改成assetsPublicPath: './' 然后将dist放在服务器上就可以运行了,建议使用这种方法,灵活改动少

    二、vue打包出现图片不显示,不能加载字体问题:

    不出现的图片一般都是背景图片,打包后会发现图片css样式是 background-image: url(static/img/img@2x.c634efc.png) ,

    加载路径是 http://域名/跟目录/static/css/static/img/img@2x.c634efc.png,

    或者 http://域名/static/css/static/img/img@2x.c634efc.png

    打开跟目录发现图片存放在 static/img下面,根本不在static/css/static/img下面所以加载图片失败。

    解决办法:

    需要单独为 css 配置 publicPath 。
    ExtractTextWebpackPlugin 提供了一个 options.publicPath 的 api,可以为css单独配置 publicPath 。

    对于用 vue-cli 生成的项目,dist 目录结构如下:

    dist
    ├── index.html
    └── static
        ├── css
        ├── img
        └── js
    

    用 ExtractTextWebpackPlugin 的 publicPath 配置就可以。更改工程 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置,重新打包:

    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath: '../../',         // 这里是/static/css/static/img/img@2x.c634efc.png 所以跳出两层../../; 注意配置这一部分,根据目录结构自由调整
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
    
    加上  publicPath: '../../', 配置后重写打包即可。
    
  • 相关阅读:
    php实现qq授权登录
    lnmp环境下上传文件过大出现 <服务器IO错误> 问题解决方案
    matpb画图_折线图.ipynb
    垂直条形图——plot.bar
    将博客搬至CSDN
    pandas的函数应用二——排序
    pandas的函数应用一
    pandas的数据对齐
    将一个二维数组的行和列分别进行逆向
    numpy——深拷贝和浅拷贝和不拷贝
  • 原文地址:https://www.cnblogs.com/Sarah119/p/8779864.html
Copyright © 2011-2022 走看看