vue-cli设置publicPath的方法

这篇文章主要讲解了vue-cli设置publicPath的方法，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

公司主营业务：成都做网站、网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联建站是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联建站推出南川免费做网站回馈大家。

几种设置publicPath后，再对比打包后的index.html文件

测试背景：

• 每次打包build完后，都单独生成一个/dist文件夹，且dist中每次都只有相同文件目录
• 部署的时候，是部署在服务器的一个/test文件夹下

打包后的文件目录：

├─dist
 ├─css
 ├─img
 └─js
 index.html

一、不设置publicPath时，部署后请求路径：

http://111.222.333.444:8888/css/app.0b79487b.css

// vue.config.js

module.exports = {
  // publicPath: '',
}

二、设置为/时，部署后请求路径：

http://111.222.333.444:8888/css/app.0b79487b.css

// vue.config.js

module.exports = {
  publicPath: '/',
}

三、设置为./时，部署后请求路径：

http://111.222.333.444:8888/test/css/app.0b79487b.css

// vue.config.js

module.exports = {
  publicPath: './',
}

四、设置为static时，部署后请求路径：

http://111.222.333.444:8888/test/static/css/app.0b79487b.css

// vue.config.js

module.exports = {
  publicPath: 'static',
}

五、设置为./static时，部署后请求路径：

http://111.222.333.444:8888/test/static/css/app.0b79487b.css

// vue.config.js

module.exports = {
  publicPath: './static',
}

六、设置为../static时，部署后请求路径：

http://111.222.333.444:8888/static/css/app.0b79487b.css

// vue.config.js

module.exports = {
  publicPath: '../static',
}

七、设置为../时，部署后请求路径：

http://111.222.333.444:8888/css/app.0b79487b.css

// vue.config.js

module.exports = {
  publicPath: '../',
}

看完上述内容，是不是对vue-cli设置publicPath的方法有进一步的了解，如果还想学习更多内容，欢迎关注创新互联行业资讯频道。