VUE打包详细步骤

一、vue2

1.修改请求静态资源的路径
打开config文件夹下的index.js文件，修改assetsPublicPath的值，从"/“改为”./"。即从根路径改为相对路径。

assetsPublicPath：'./'

2、修改本地图片的路径
打开build下的utils.js文件，增加

publicPath:'../../'

二、vue3

1.在vue.config.js加入

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/', //根路径
 };

2.在router的index.js中加入（改成hash模式）

const router = new VueRouter({
  routes,
  mode: "hash", 
});

三：出现iconfont不显示的问题

1.在iconfont.css中（加上https:）

@font-face {
  font-family: 'iconfont';  /* Project id 3292342 */
  src: 
       url('https://at.alicdn.com/t/c/******.woff2?t=1670311100709') format('woff2'),
       url('https://at.alicdn.com/t/c/******.woff?t=1670311100709') format('woff'),
       url('https://at.alicdn.com/t/c/******.ttf?t=1670311100709') format('truetype');
}

2.在public的index.html中（加上https:）

<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3292342_lr0r2ypcpcp.css">

四、重新打包

npm run build