vuepublicpath的简单介绍

本篇文章给大家谈谈vuepublicpath，以及对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vue项目打包步骤
• 2、【前端小知识】vue的publicPath
• 3、vue-cli 创建的项目vue.config.js文件配置assetsPublicPath
• 4、通俗易懂讲解vue.config.js的配置参数
• 5、解决 vue.config.js publicPath：‘././’ 项目运行页面空白问题
• 6、vuecli3打包部署 非根目录下 配置vue.config.js publicPath

vue项目打包步骤

vue项目打包

终端运行命令 npm run build

打包成功的标志与项目的改变，如下图：

点击index.html，通过浏览器运行，出现以下报陵竖错，如睁扮图：

那么应该如何修改呢？

具体步骤如下：

1、查看package.js文件的scripts命令

2、打开webpack.dev.conf.js文件，找到publicPath: config.dev.assetsPublicPath,按Ctrl点击，跳转到index.js文件

3、其中dev是开发环境，build是构建版本，找到build下面的assetsPublicPath: '/',然后修改为assetsPublicPath: './',即“/”前加点。

4、终端运行 npm run build 即可。

此时点击index.html，通过浏览器运行便，会发现动态绑定的static的图片找不悉汪灶到，故static必须使用绝对路径。将图片路径修改为绝对路径，至此，打包完成。

[img]

【前端小知识】vue的publicPath

publicPath配置

项目请求根路径斗腊姿氏配置

项目在打包后，需要改变访问空册滑根路径

在该目录下vue.config.js进行配置

// 项目根目录下的vue.config.js文件

vue-cli 创建的项目vue.config.js文件配置assetsPublicPath

解决方法：

1. vue-cli 2.x版本

在config文件夹下的index.js中修改 assetsPublicPath: './'

2. vue-cli 3.x版本

在 cli3 中 assetsPublicPath 属性被 baseUrl 取代，只需要在vue.config.js 添加baseUrl 属性贺闭局 设为 ‘./’ 即态慧可

3. vue-cli 4.x版本

与cli3相同都是禅让修改 vue.config.js 文件 ，但将属性换为 publicPath:'./'

通俗易懂讲解vue.config.js的配置参数

贴上 官网

vue-cli3 创建的时候并不会自动创建vue.config.js，因为这个是个可选项，所以一般都是需要修改webpack的时候才会自己创建一个vue.config.js

再然后因为vue-cli3内部高度集成了webpack，一般来说使用困洞做者不需要再去知道weboack做了什么，所以没有暴露webpack的配置文件，我们可以手动去创建vue.config.js 去修改默认的webpack。注意，只能叫vue.config.js。

publicPath （从 Vue CLI 3.3 起已弃用baseUrl，请使用publicPath）

参考：

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

这个值在开发环境下同样生效。如果你想把 开发服务器架设在根路径 ，你可以使用一个条件式的值：

通常开发环境，本地运行都会直接部署在根路径上，publicPath设置为'/'，访问汪衡地址是你的IP地址。如下是设置成'/app'的效果：

从上面可以得知，静态资源文件都是在app下的，所以在dist下新增添一个app目录，把dist下文件放到app下，相当于一个文件的路径，可以发现项目会正常启动。一般nginx都会配置一个静态资源目录，打包后的文件都会放到这个静态资源目录里面，nginx去做映射，所以publicPath这个属性基本不用改。'/'就行。

结论： publicPath配置成'/aaa/bbb/ccc'， 则需在相应的服务器路径中新建aaabbbccc的文件夹，然后将打包后的文件放进去，就ok啦。

项目中，我会在.env.production文件中设置一个变量VUE_APP_BASE_URL ，项目打包后告诉相关人员 nginx 路由前缀是什么即可

outputDir

assetsDir

indexPath

filenameHashing

直观效果：当运行npm run build时，

打包后的文件后面都会带一个8位的hash值，那啥是个hash值？

在打包出来的文件名上加上文件内容的hash是目前最常见的有效使用浏览器长缓存的方法，js文件如果有内容更新，hash就会更新，浏览器请求路径变化所以更新缓存，如果js内容不变，hash不变，直接用缓存。（这段话是从别的文章里面参考的）。

将filenameHashing这个值设置为false试试，就不会带那个后缀hash值。

pages

lintOnSave

runtimeCompiler

transpileDependencies

productionSourceMap

crossorigin （不理解）

integrity

configureWebpack

chainWebpack

Css相关配置

devServer

如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

补充知识

所谓的跨域就是不颤贺同源，不满足协议、域名、端口都相同的约定

同源

不同源 协议不同(https)

不同源 端口不同(90)

不同源 域名不同(demo)

当协议、域名、端口中任意一个不相同时，就是不同源。若不同源之间相互请求资源，就算作跨域

补充知识

反向代理（Reverse Proxy）方式是指以代理服务器来接受网络上的连接请求，然后将请求转发给内部网络上的服务器，并将服务器上得到的结果返回给请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。客户端无需做任何配置。

修改config/index.js /vue.config.js文件（改完之后千万记得要重新 npm run dev）

host 将他的值修改为 0.0.0.0，代表可以访问本机所有的IP地址，让vue项目可通过localhost和IP同时访问。

port 设置端口号

open 是否在第一次编译时是自动打开浏览器

hot 开启为true，启动热重载，自动刷新页面

https

inline

overlay

targe 代理的服务器，也就是api要访问的服务器。

changeOrigin 允许跨域， 为false时，请求头中host仍然是浏览器发送过来的host;如果设置成true：发送请求头中host会设置成target的值

ws 是否代理websocket

pathRewrite 重写 url 的 path 部分

此文记录下来，方便自己遗忘的时候能够快速查阅，如有错误请指出。

参考链接：

这篇文章讲的也很详细

解决 vue.config.js publicPath：‘././’ 项目运行页面空白问题

解决悉则派方法盯盯，下面三个必填

module.exports = {

lintOnSave: false, //如果为false，就是取消睁贺eslint规则的检查

　publicPath: "./",

assetsDir: "static",

outputDir: 'dist',

}

vuecli3打包部署 非根目录下 配置vue.config.js publicPath

从 Vue CLI 3.3 起已弃用baseUrl，请使用publicPath。

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

这个值在开发环境下同样生效。如果你想把开发服务器架设在根路径，你可以使用一个条件式的值：盯贺裂

在vue.config.js文件中添加如下：

关于vuepublicpath和的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。