解决vue项目打包后打开index.html无内容，出现404问题

提示：学习时出现的问题以及解决的办法

1. 出现的问题

项目完成后打包，打开 index.html ，无内容，出现404报错。

2. 分析

默认打包，index.html 引入其他打包的文件使用的是绝对地址，地址是以 / 开头（要找到当前index.html打开时所在服务器的根地址(文件夹))，就得确保你的 vscode liserver 插件打开时，vscode 根目录得直接是 dist 文件夹，你如果把dist文件夹交给后台运维工程师部署到服务器上，dist下内容就得在服务器根目录才行，但是服务器一般会有多个项目,不让你用根目录直接放一个项目。

3. 解决

webpack 让你写一个配置项 publicPath(控制index.html引入其他资源前缀地址)，vue.config.js（脚手架配置文件,webpack配置文件)，publicPath:默认值‘/’确保开发环境下，是这个值，因为开发服务器会把所有资源打包在内存里而且作为服务器的根目录文件夹，生产环境准备上线了，这个时候，就得用相对地址，publicPath: ’ ./ '，路径不以 / 开头其实就是 ./ 开头(默认的)

4. 重新打包运行

5. 扩展知识

./ 可以让开发环境和生产环境都可以正常使用，为了严谨一些还是要换回来
开发环境: ’ / ’
生产环境: './ ’

这时，我们就有一个想法：有没有一种办法能识别在不同环境用不同的呢？
解决：
node 里有个内置的环境变量 process.env.NODE_ENV
process.env.NODE_ENV 它会根据你敲击的命令，来使用不同的值解决:
如果你敲击 npm run server，process.env.NODE_ENV 的值就是 ‘development’ 字符串
如果你敲击 npm run build， process.env.NODE_ENV 的值就是 ‘production’ 字符串

这篇好文章是转载于：学新通技术网