当前位置:家常菜>百科>科技>正文

vue publicpath

人气:291 ℃/2023-03-29 05:57:25

vue怎么设置publicpath呢?不知道的小伙伴来看看小编今天的分享吧!

1、每次打包build完后,都单独生成一个/dist文件夹,且dist中每次都只有相同文件目录

2、部署的时候,是部署在服务器的一个/test文件夹下

打包后的文件目录:

1

2

3

4

5

├─dist

 ├─css

 ├─img

 └─js

 index.html

1、不设置publicPath时,部署后请求路径:

1

2

3

4

5

// vue.config.js module.exports = {  // publicPath: '',}

二、设置为/时,部署后请求路径:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html><html lang=en><head>  <title>test</title>  <link href=/css/app.0b79487b.css rel=preload as=style>  <link href=/js/app.ba2d9b8a.js rel=preload as=script>  <link href=/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>  <link href=/css/app.0b79487b.css rel=stylesheet></head><body><div id=app></div><script src=/js/chunk-vendors.e7ac9ff2.js></script><script src=/js/app.ba2d9b8a.js></script></body></html>

1

2

3

4

5

// vue.config.js module.exports = {  publicPath: '/',}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html><html lang=en><head>  <title>test</title>  <link href=/css/app.0b79487b.css rel=preload as=style>  <link href=/js/app.ba2d9b8a.js rel=preload as=script>  <link href=/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>  <link href=/css/app.0b79487b.css rel=stylesheet></head><body><div id=app></div><script src=/js/chunk-vendors.e7ac9ff2.js></script><script src=/js/app.ba2d9b8a.js></script></body></html>

3、设置为./时,部署后请求路径:

1

2

3

4

5

// vue.config.js module.exports = {  publicPath: './',}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html><html lang=en><head>  <title>test</title>  <link href=css/app.0b79487b.css rel=preload as=style>  <link href=js/app.8569d42d.js rel=preload as=script>  <link href=js/chunk-vendors.e7ac9ff2.js rel=preload as=script>  <link href=css/app.0b79487b.css rel=stylesheet></head><body><div id=app></div><script src=js/chunk-vendors.e7ac9ff2.js></script><script src=js/app.8569d42d.js></script></body></html>

4、设置为static时,部署后请求路径:

1

2

3

4

5

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html><html lang=en><head>  <title>test</title>  <link href=static/css/app.0b79487b.css rel=preload as=style>  <link href=static/js/app.d0717808.js rel=preload as=script>  <link href=static/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>  <link href=static/css/app.0b79487b.css rel=stylesheet></head><body><div id=app></div><script src=static/js/chunk-vendors.e7ac9ff2.js></script><script src=static/js/app.d0717808.js></script></body></html>

5、设置为./static时,部署后请求路径:

1

2

3

4

5

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html><html lang=en><head>  <title>test</title>  <link href=static/css/app.0b79487b.css rel=preload as=style>  <link href=static/js/app.d0717808.js rel=preload as=script>  <link href=static/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>  <link href=static/css/app.0b79487b.css rel=stylesheet></head><body><div id=app></div><script src=static/js/chunk-vendors.e7ac9ff2.js></script><script src=static/js/app.d0717808.js></script></body></html>

6、设置为../static时,部署后请求路径:

1

2

3

4

5

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html><html lang=en><head>  <title>test</title>  <link href=../static/css/app.0b79487b.css rel=preload as=style>  <link href=../static/js/app.695b7ccc.js rel=preload as=script>  <link href=../static/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>  <link href=../static/css/app.0b79487b.css rel=stylesheet></head><body><div id=app></div><script src=../static/js/chunk-vendors.e7ac9ff2.js></script><script src=../static/js/app.695b7ccc.js></script></body></html>

7、设置为../时,部署后请求路径:

1

2

3

4

5

// vue.config.js module.exports = {  publicPath: '../',}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html><html lang=en><head>  <title>test</title>  <link href=../css/app.0b79487b.css rel=preload as=style>  <link href=../js/app.67ace555.js rel=preload as=script>  <link href=../js/chunk-vendors.e7ac9ff2.js rel=preload as=script>  <link href=../css/app.0b79487b.css rel=stylesheet></head><body><div id=app></div><script src=../js/chunk-vendors.e7ac9ff2.js></script><script src=../js/app.67ace555.js></script></body></html>
  • 凌渡改装轮毂可以吗?

    凌渡改装轮毂注意事项:1、改装轮毂不宜改装过宽尺寸,轮毂越大,为了保持车辆扁平比,轮胎就会越薄,对地面的感受就更明显,通过凹凸不平的路段时会大大降低乘车人的舒适度;2、需要时常...

    问答查看全文>>
  • 2022年财务人员工作总结

    财务人员工作总结怎么写呢?一起来看看小编今天的分享吧。1、财务人员工作总结首先可以描写作为财务人员的日常基础工作和职责,例如编制各类财务报表等;2、然后可以描写具备的专业知识和...

    教育查看全文>>
  • 安全带拉出来弹不回去怎么办

    是卷带弹簧长时间使用失去弹性导致的。解决此问题只需要更换卷带弹簧,或更换整个安全带机构。很多车子随着使用时间的增加,都会出现安全带不能自动弹回去的问题。有些是因为安全带脏污导致...

    问答查看全文>>
  • 什么让生活更美好小学作文范文

    什么让生活更美好小学作文怎么写?要从哪些方面去写,一起来看看小编今天的分享吧。什么让生活更美好小学作文主要由三个部分构成。首先明确本次作文的主题,叙述关于想要记录主题事项的具体...

    教育查看全文>>
  • 大众桑塔纳水温表指针如何看

    只用水温报警灯,红灯是表示水温过高;蓝灯表示水温过低。新款大众桑塔纳没有水温表,只有水温报警灯。水温报警灯亮提示车主及时添加防冻液。当水温灯亮红灯时表明发动机水温过高,需停车休...

    问答查看全文>>
本网站部分内容、图文来自于网络,如有内容侵犯您的合法权益,请及时与我们联系,我们将第一时间安排核实及删除!
CopyRight © 2007-2024 家常菜 All Rights Reserved. 手机版