vue-cli中設定publicPath的幾種方式對比

2022-07-29 22:00:14

設定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
      }
    }
  }
}

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。

vue-cli中設定publicPath的幾種方式對比

目錄

設定publicPath的幾種方式對比

publicPath打包設定

vue.config.js publicPath "./" npm run build無效

熱門文章