vs-code中用liveServer打开vue-cli打包后的html，模拟查看线上路径问题

首先在扩展搜索liveServer下载安装

之后右键html就会出现liveServer命令

我用的vue-cli版本是3.2，为防止路径问题，在vue.config.js中修改publicPath为

module.exports = {
	publicPath: "./"
}	

完成重新打包
在vscode 配置 setting.json 中配置liveServer

 {
 	 "liveServer.settings.port": 8080, //设置本地服务的端口号
     "liveServer.settings.root": "./dist", //设置根目录，也就是打开的文件会在该目录下找,所以vue-cli打包后路径为dist就这样写
     "liveServer.settings.CustomBrowser": "chrome", //设置默认打开的浏览器
     "liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito --remote-debugging-port=9222",
     "liveServer.settings.NoBrowser": false,
     "liveServer.settings.ignoredFiles": [//设置忽略的文件
         ".vscode/**",
         "**/*.scss",
         "**/*.sass"
     ]
}

配置完成后右键dist目录下的index.html，并用liveServer打开，这样就大功告成了