首先在扩展搜索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打开，这样就大功告成了但是这样往往会出现目录路径问题，搞不清来龙去脉很难解决问题，这里推荐使用git bash实现模拟线上
- 首先全局安装
npm install -g live-server - 然后就可以直接使用了：
- 打包好自己的项目
- 使用
git bash进入打包好的文件夹 dist - 直接使用命令
live-server便可打开项目，这里打开后的项目即使打包的项目
附：live-server 参数说明：
--port=NUMBER - select port to use, default: PORT env var or 8080
--host=ADDRESS - select host address to bind to, default: IP env var or 0.0.0.0 ("any address")
--no-browser - suppress automatic web browser launching
--browser=BROWSER - specify browser to use instead of system default
--quiet | -q - suppress logging
--verbose | -V - more logging (logs all requests, shows all listening IPv4 interfaces, etc.)
--open=PATH - launch browser to PATH instead of server root
--watch=PATH - comma-separated string of paths to exclusively watch for changes (default: watch everything)
--ignore=PATH - comma-separated string of paths to ignore (anymatch-compatible definition)
--ignorePattern=RGXP - Regular expression of files to ignore (ie .*\.jade) (DEPRECATED in favor of --ignore)
--no-css-inject - reload page on CSS change, rather than injecting changed CSS
--middleware=PATH - path to .js file exporting a middleware function to add; can be a name without path nor extension to reference bundled middlewares in middleware folder
--entry-file=PATH - serve this file (server root relative) in place of missing files (useful for single page apps)
--mount=ROUTE:PATH - serve the paths contents under the defined route (multiple definitions possible)
--spa - translate requests from /abc to /#/abc (handy for Single Page Apps)
--wait=MILLISECONDS - (default 100ms) wait for all changes, before reloading
--htpasswd=PATH - Enables http-auth expecting htpasswd file located at PATH
--cors - Enables CORS for any origin (reflects request origin, requests with credentials are supported)
--https=PATH - PATH to a HTTPS configuration module
--https-module=MODULE_NAME - Custom HTTPS module (e.g. spdy)
--proxy=ROUTE:URL - proxy all requests for ROUTE to URL
--help | -h - display terse usage hint and exit
--version | -v - display version and exit
