一、publicPath

publicPath是部署应用包时的基本 URL

  • 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。
  • 如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。
  • 例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。

1.1、 publicPath设置为绝对路径

场景：nginx部vue项目

不设置(默认为 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>

相当于打包过后的路径上多一个文件夹的名字 

1.2、publicPath设置相对路径

publicPath设置为空字符串'', 或是'./'，这样所有的资源都会被链接为相对路径。
这样好处就是打出来的包可以被部署在任意路径，直接在dist打包文件夹就可打开index.html页面

在以下情况下，应当避免使用相对 publicPath:

  • 当使用基于 HTML5 history.pushState 的路由时；
  • 当使用 pages 选项构建多页面应用时。

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

二、哪里会用到publicPath

在vue中的项目中

  • 一般静态文件路径要使用publicPath
  • 项目打包部署时都会用到publicPath;

2.1、静态文件使用publicPath

如果你的项目里面的静态文件都放在public文件中，那么使用的时候要使用publicPath这个变量，防止打包后静态文件找不到；
你需要通过绝对路径来引用它们。因为：任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack；

链接

2.2、项目打包使用publicPath

如果你想把开发服务器架设在根路径，你可以使用一个条件式的值：
这里判断是否是生产环境 如果是那么前面的部署路径加上 /app/；如果不是 默认使用根路径 / ;

生产环境经常配合前端服务器的中nginx代理使用；

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/app/' : '/'
}

三、publicPath和process.env.BASE_URL

3.1、vue.config.js里面设置了publicPath

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/video/' : '/',
}

那么process.env.BASE_URL 其实就是 publicPath;
不信你可以在组件中console.log(process.env.BASE_URL)打印出来；
BASE_URL会被vue.config.js中 publicPath变量覆盖。

3.2、没有在vue.config.js里面设置publicPath；

那么process.env.BASE_URL默认就是根路径'/' ;

3.3、在vue路由的配置项中也会用到process.env.BASE_URL：

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes,
})

mode:history代表history路由不再显示#，会像如下形式：localhost:8080/user/list
主要是base属性代表着是基本的路由请求的路径：
如：base: '/app/'
说明项目部署在app目录下，那么vue所有的路由前面都会自动加上:/app

# vue.js # javascript # 前端
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区