记录 vue-cli build 打包之后的问题

本文介绍了如何解决Vue项目在打包部署过程中遇到的各种问题,包括调整Webpack配置来正确处理路径和资源引用,确保项目的顺利运行。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.打包之后首页没有双引号的问题

在 build 的webpack.prod.conf.js 下 ,修改 removeAttributeQuotes,改为 false

 

 

2. 首页路径的问题

config 中index.js   assetsPublicPath 修改   改为  :   assetsPublicPath: './',

 

 

3. 再者打不开 可能是 在router 的index.js 中写了 mode:history ,去掉就好 了,

 

4.打开之后 路径问题,有一些 woff 这样的字体文件加载不出来

 

在 build 的utils.js 中 增加 publicPath:'../../' 这段代码

 

类似

  if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath:'../../'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }
 

5.

Vue项目打包    图片的路径问题:
1. 图片不能使用绝对路径     /src/assets/images/logo.png     这样打包出来的路径也还是 /src/assets/images/logo.png ,webpack  是不处理绝对路径的,如果图片名称是固定的,图片路径要用相对路径    ../../assets/images/logo.png
2. 如果图片路径是通过变量拼接出来的,要用这种方式     < img :src="require('@/assets/images/data/' + item.img)" alt="">

也可以用import将地址导入组件,定义变量,< img  :src="imgSrc">,绝对路径相对路径都可以

经过上述步骤之后 ,我的代码可以启动了

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值