这篇“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的方式有哪些”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
