vue-cli настройка publicPath небольшая заметка

Webpack

несколько настроекpublicPathПосле этого сравните упакованноеindex.htmlдокумент

Тестовый фон:

  • После каждого пакета и сборки генерируется отдельный/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: '',
}

<!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>

Во-вторых, установите/, путь запроса после развертывания:http://111.222.333.444:8888/css/app.0b79487b.css 

// vue.config.js

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

<!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>

В-третьих, установите./, путь запроса после развертывания:http://111.222.333.444:8888/test/css/app.0b79487b.css 

// vue.config.js

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

<!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>

В-четвертых, установитеstatic, путь запроса после развертывания:http://111.222.333.444:8888/test/static/css/app.0b79487b.css 

// vue.config.js

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

<!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>

Пять, установить на./static, путь запроса после развертывания:http://111.222.333.444:8888/test/static/css/app.0b79487b.css 

// vue.config.js

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

<!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, путь запроса после развертывания:http://111.222.333.444:8888/static/css/app.0b79487b.css 

// vue.config.js

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

<!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>

Семь, установить на../, путь запроса после развертывания:http://111.222.333.444:8888/css/app.0b79487b.css 

// vue.config.js

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

<!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>
Категории