(三)webpack前端项目的打包部署

130 阅读1分钟

一、打包配置

在vue-cli@4中打包直接用npm run build会出现两个问题: 一是会出现index.html中的引号的问题,二是会出现图片找不到的问题 因此需要进行一些配置: 1)config>>index.js>>build下配置:图片.png 2)build>>webpack.prod.conf.js下

removeAttributeQuotes: false//(解决引号的问题)

,同时

from: path.resolve(__dirname, '../static'),

如图: 图片.png 图片.png

3)build>>utils.js下

 publicPath: '../../',

如图: 图片.png

2.部署

运行npm run build 即可生成文件夹,拷贝到服务器根目录下即可访问 图片.png

3.问题

在js代码中用到的一些图片的路径不能写相对路径 如:在html代码中:

<img src="./../../static/image/logo.png"/>

这样写相对路径是可以识别的 但是在js代码中需要写绝对路径:如 图片.png 如果写成相对路径,即:

./../../static/image/hotel.png

则无法识别