（三）webpack前端项目的打包部署

一、打包配置

在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

则无法识别