vue-cli设置publicPath几种方式对比

publicPath打包设置1. 不设置(默认为 publicPath: ‘/’) 或者设置 publicPath: '/'// vue.config.jsmodule.exports = {publicPath: '/',}html中被打包的css和js路径如下<!DOCTYPE html><html lang=en><head><meta charse

whylost迷心

13477人浏览 · 2020-06-11 09:40:29

whylost迷心 · 2020-06-11 09:40:29 发布

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

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^