vue-cli中设置publicPath的几种方式对比
作者:whylost迷心
这篇文章主要介绍了vue-cli中设置publicPath的几种方式对比,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
设置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无效
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 } } } }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。