Ta
vue-cli设置publicPath几种方式对比
Table of Contents
publicPath打包设置
1. 不设置(默认为 publicPath: ‘/’) 或者设置 publicPath: '/'
// vue.config.js
module.exports = {
publicPath: '/',
}
* 1
* 2
* 3
* 4html中被打包的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>
* 1
* 2
* 3
* 4
* 5
* 6
* 7
* 8
* 9
* 10
* 11
* 12
* 13
* 14
* 15
* 16
* 17
* 18
* 19
* 20
* 21
* 22
* 23
* 242. 设置 publicPath: ‘./’ 好处是随处可打开,直接在打包文件夹就可打开html页面
// vue.config.js
module.exports = {
publicPath: './',
}
* 1
* 2
* 3
* 4html中被打包的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>
* 1
* 2
* 3
* 4
* 5
* 6
* 7
* 8
* 9
* 10
* 11
* 12
* 13
* 14
* 15
* 16
* 17
* 18
* 19
* 20
* 21
* 22
* 23
* 243. 设置 publicPath: 'vmst’
// vue.config.js
module.exports = {
publicPath: 'vmst',
}
* 1
* 2
* 3
* 4html中被打包的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>
* 1
* 2
* 3
* 4
* 5
* 6
* 7
* 8
* 9
* 10
* 11
* 12
* 13
* 14
* 15
* 16
* 17
* 18
* 19
* 20
* 21
* 22
* 23
* 24
0 评论