设置publicPath的几种方式对比
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>
vue.config.js publicPath "./" npm run build无效
outputDirassetsDirindexPath
必须填
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
}
}
}
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持Devmax。