这篇“vue-cli中设置publicPath的方式有哪些”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue-cli中设置publicPath的方式有哪些”文章吧。
1. 不设置(默认为 publicPath: ‘/’) 或者设置 publicPath: '/'
计算
安全
数据库
网络和加速
企业服务
// vue.config.js
module.exports = {
publicPath: '/',
}html中被打包的css和js路径如下
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel=icon href=/favicon.ico>
<title>vue-manage-system-template-js</title>
<link href=/js/about.62bc742c.js rel=prefetch>
<link href=/css/app.1d486654.css rel=preload as=style>
<link href=/css/chunk-vendors.2ac5db4b.css rel=preload as=style>
<link href=/js/app.a62b0400.js rel=preload as=script>
<link href=/js/chunk-vendors.7a1d5ffa.js rel=preload as=script>
<link href=/css/chunk-vendors.2ac5db4b.css rel=stylesheet>
<link href=/css/app.1d486654.css rel=stylesheet>
</head>
<body>
<noscript><strong>We're sorry but vue-manage-system-template-js doesn't work properly without JavaScript enabled. Please
enable it to continue.</strong></noscript>
<div id=app></div>
<script src=/js/chunk-vendors.7a1d5ffa.js></script>
<script src=/js/app.a62b0400.js></script>
</body>
</html>2.设置 publicPath: ‘./’ 好处是随处可打开,直接在打包文件夹就可打开html页面
// vue.config.js
module.exports = {
publicPath: './',
}html中被打包的css和js路径如下
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel=icon href=favicon.ico>
<title>vue-manage-system-template-js</title>
<link href=js/about.62bc742c.js rel=prefetch>
<link href=css/app.1d486654.css rel=preload as=style>
<link href=css/chunk-vendors.2ac5db4b.css rel=preload as=style>
<link href=js/app.a62b0400.js rel=preload as=script>
<link href=js/chunk-vendors.7a1d5ffa.js rel=preload as=script>
<link href=css/chunk-vendors.2ac5db4b.css rel=stylesheet>
<link href=css/app.1d486654.css rel=stylesheet>
</head>
<body>
<noscript><strong>We're sorry but vue-manage-system-template-js doesn't work properly without JavaScript enabled. Please
enable it to continue.</strong></noscript>
<div id=app></div>
<script src=js/chunk-vendors.7a1d5ffa.js></script>
<script src=js/app.a62b0400.js></script>
</body>
</html>3.设置 publicPath: 'vmst’
// vue.config.js
module.exports = {
publicPath: 'vmst',
}html中被打包的css和js路径如下
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel=icon href=vmst/favicon.ico>
<title>vue-manage-system-template-js</title>
<link href=vmst/js/about.62bc742c.js rel=prefetch>
<link href=vmst/css/app.1d486654.css rel=preload as=style>
<link href=vmst/css/chunk-vendors.2ac5db4b.css rel=preload as=style>
<link href=vmst/js/app.a62b0400.js rel=preload as=script>
<link href=vmst/js/chunk-vendors.7a1d5ffa.js rel=preload as=script>
<link href=vmst/css/chunk-vendors.2ac5db4b.css rel=stylesheet>
<link href=vmst/css/app.1d486654.css rel=stylesheet>
</head>
<body>
<noscript><strong>We're sorry but vue-manage-system-template-js doesn't work properly without JavaScript enabled. Please
enable it to continue.</strong></noscript>
<div id=app></div>
<script src=vmst/js/chunk-vendors.7a1d5ffa.js></script>
<script src=vmst/js/app.a62b0400.js></script>
</body>
</html>outputDir
assetsDir
indexPath
必须填
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
outputDir: "dist",
assetsDir:"static",
indexPath:'index.html',
devServer: {
overlay: {
warnings: false,
errors: false
},
// 设置主机地址
host: 'localhost',
// 设置默认端口
port: 8080,
// 设置代理
proxy: {
'/api': {
// 目标 API 地址
target: 'http://192.168.124.231:8707/', // 接口的域名
// 如果要代理 websockets
ws: false,
// 将主机标头的原点更改为目标URL
changeOrigin: true
}
}
}
}以上就是关于“vue-cli中设置publicPath的方式有哪些”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
