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

目录
  • 设置publicPath的几种方式对比
    • publicPath打包设置
  • vue.config.js publicPath "./" npm run build无效

设置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
      }
    }
  }
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue-cli设置publicPath小记

    几种设置publicPath后,再对比打包后的index.html文件 测试背景: 每次打包build完后,都单独生成一个/dist文件夹,且dist中每次都只有相同文件目录 部署的时候,是部署在服务器的一个/test文件夹下 打包后的文件目录: ├─dist ├─css ├─img └─js index.html 一.不设置publicPath时,部署后请求路径: http://111.222.333.444:8888/css/app.0b79487b.css // vue.config.js

  • vue-cli3.0使用及部分配置详解

    好长一段时间没有关注vue脚手架了,昨天因为需要个后台模板,用脚手架 搞了一下,竟然发现指令不能用了,看官方文档已经升级3.0,也是试的玩了一下, 大致写写怎么玩的! 1.先全局安装vue-cli3.0 检测安装: vue -V 2.创建项目(这个就跟react创建脚手架项目比较像了) 这里如果你是第一次用3.0版本的话,是没有前两个的,而只有最后两个,这里是 让你选的,第一个是默认配置,一般选第二个,自己配置,这里选择最后一个 在选择功能后,会询问更细节的配置, TypeScript: 是否使

  • Vue-cli assets SubDirectory及PublicPath区别详解

    近期在参与用vue+ springBoot前后端不分离项目,遇到了前端打包后dist文件放到后台无法运行报404错误,static下的资源都访问不了问题. 问题1:我们知道前后端不分离项目,一些静态图片.页面直接放在resource/static下,由于前后台分开开发,前端进行了跨域处理,dist文件放到后台就相当于本地静态资源,所以不需要跨域处理,可以将引入跨域的路径baseURL置空 const service = axios.create({ //baseURL: '/appstore',

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

    目录 设置publicPath的几种方式对比 publicPath打包设置 vue.config.js publicPath "./" npm run build无效 设置publicPath的几种方式对比 publicPath打包设置 1. 不设置(默认为 publicPath: ‘/’) 或者设置 publicPath: '/' // vue.config.js module.exports = {   publicPath: '/', } html中被打包的css和js路径如下

  • Java中获取时间戳的三种方式对比实现

    Java中获取时间戳 三种方式对比 最近项目开发过程中发现了项目中获取时间戳的业务.而获取时间戳有以下三种方式,首先先声明推荐使用System类来获取时间戳,下面一起看一看三种方式. 1.System.currentTimeMillis() System类中的currentTimeMillis()方法是三种方式中效率最好的,运行时间最短.开发中如果设计到效率问题,推荐使用此种方式获取. System.currentTimeMillis() 2.new Date().getTime() 除了Sys

  • 分享java中设置代理的两种方式

    分享java中设置代理的两种方式

    1 前言 有时候我们的程序中要提供可以使用代理访问网络,代理的方式包括http.https.ftp.socks代理.比如在IE浏览器设置代理. 那我们在我们的java程序中使用代理呢,有如下两种方式.直接上代码. 2 采用设置系统属性 import java.net.Authenticator; import java.net.PasswordAuthentication; import java.util.Properties; public class ProxyDemo1 { public

  • 基于keras中训练数据的几种方式对比(fit和fit_generator)

    一.train_on_batch model.train_on_batch(batchX, batchY) train_on_batch函数接受单批数据,执行反向传播,然后更新模型参数,该批数据的大小可以是任意的,即,它不需要提供明确的批量大小,属于精细化控制训练模型,大部分情况下我们不需要这么精细,99%情况下使用fit_generator训练方式即可,下面会介绍. 二.fit model.fit(x_train, y_train, batch_size=32, epochs=10) fit的

  • vue cli中env的使用指南

    目录 前言 简介-官方 示例配置 前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 test-单测)模式.其实这是小伙伴们没有理解 vueCli 文档所导致的. vueCli 命令中 --mode 对应的 .env.[mode],而不是 NODE_ENV 注意 除了 VUE_APP_ 变量之外. 还有两个特殊的变量: NODE_ENV: 是 develo

  • Vue CLI中模式与环境变量的深入详解

    Vue CLI中模式与环境变量的深入详解

    前言 在实际项目的开发中,我们一般会经历项目的开发阶段.测试阶段和最终上线阶段,每一个阶段对于项目代码的要求可能都不尽相同,那么我们如何能够游刃有余的在不同阶段下使我们的项目呈现不同的效果,使用不同的功能呢? 这里就需要引入环境的概念.官方文档中模式和环境变量说明 一般一个项目都会有以下 3 种环境: 开发环境(开发阶段,本地开发版本,一般会使用一些调试工具或额外的辅助功能): 测试环境(测试阶段,上线前版本,除了一些 bug 的修复,基本不会和上线版本有很大差别): 生产环境(上线阶段,正式对

  • Vue项目中设置背景图片方法

    在Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式: background:url("../../assets/head.jpg"); 这个时候我们就要考虑使用其他的方式了,node中提供了一种比较有效的方式来解决这个问题: 1.在data中定义如下: export default { name: 'productdetailspage', data() {

  • Vue项目中打包优化的四种方法详解

    目录 前言 打包优化的目的: 性能优化的主要方向: 1.异步组件配置(路由懒加载) 2.去掉打包后的 console 3.使用CDN 4.yarn build生成dist目录 总结 前言 默认情况下,通过import语法导入的第三方依赖包,最终会全部打包到一个js文件中,会导致单文件体积过大大,在网速底下时会阻塞网页加载,影响用户体验. 打包优化的目的: 1.项目启动速度,和性能 2.必要的清理数据 3.减少打包后的体积 第一点是核心,第二点呢其实主要是清理console 性能优化的主要方向:

  • 详解Vue中使用Echarts的两种方式

    1. 直接引入echarts 先npm安装echarts npm install echarts --save 开发: main.js import myCharts from './comm/js/myCharts.js' Vue.use(myCharts) myCharts.js /** * 各种画echarts图表的方法都封装在这里 */ import echarts from 'echarts' (function() { var chart = {}; chart.install =

  • 在vue中写jsx的几种方式

    目录 版本 render函数 jsx/tsx 使用jsx的几种方式 使用js对象注册component 使用.vue文件 vue2.7在.vue文件中结合compositionApi和jsx 版本 本文版本配置 vue: 2.7.2 vue-cli: ~4.5.18: 本文代码github仓库地址 render函数 render函数和vue中的template是互斥的,template最终是要编译成virtual Dom的,而render函数可以更直接构建virtual Dom: virtual

随机推荐