-
vue项目打包publicpath_Vue项目打包路径问题
2020-12-22 21:43:58最近在搞Vue CLI的项目打包,出现了常见的路径问题,经过研究问题和文档,现在有了自己的看法,以下所有内容都是建立在Vue CLI3之上。关于vue.config.js文件:这个文件的配置主要是用来设置打包的文件相关信息的命令...最近在搞Vue CLI的项目打包,出现了常见的路径问题,经过研究问题和文档,现在有了自己的看法,以下所有内容都是建立在Vue CLI3之上。
关于vue.config.js文件:
这个文件的配置主要是用来设置打包的文件相关信息的命令:npm run build,而调试模式npm run serve,只不过是是对build到内存后,再次启动到node服务器。
在调试模式下,这个文件的更新并不会因为ctrl+s保存而从新读取,只有重启服务才能生效。
vue.config.js的详细配置信息请查看文档。
关于预览打包
这个问题一般都是仅仅需要你更改下vue.config.js中的publicPath设置,改为publicPath: "./",把路径改为相对路径。
Hash模式路由的配置
在这种情况下,一般只需要操作上面的路径更改就可以了。
HIstory模式路由的配置
先引用一段文档里的话:
相对 publicPath 的限制
相对路径的 publicPath 有一些使用上的限制。在以下情况下,应当避免使用相对 publicPath:
当使用基于 HTML5 history.pushState 的路由时;
在启用HTML5的History模式时,不应该把publicPath改为相对路由,这样请求的js和css文件会出错。
image.png
这是因为在使用嵌套路由后又使用了History模式,设置相对路由,打包后的静态文件也是以相对路径引入,所以会在前面加上去index这个当前路径的父路由。会因获取不到js文件而出错。
因此文档建议使用绝对路径。
在不使用嵌套路由时,按照前文的介绍配置是没有问题的,在嵌套路由的时候必须使用绝对路径。
关于其他路径问题
我们在Vue开发中常常使用一个vue-lazyload来处理懒加载图片,这个图片的路径问题也是需要考虑的。
image.png
同样默认使用相对路径,导致出现前文所说的问题。
使用绝对路径后问题解决。
image.png
再次阅读文档后发现,给出的DEMO也是绝对路径(看文档不仔细😂)。
其他闲话
这个项目最开始是使用的Hash模式路由,修改publicPath为相对后就解决了问题。但是为了提高用户体验,要缓存滚动条位置,所以不得不使用History模式路由,所以一出现了一系列问题😭。
-
vue项目打包publicpath_vue项目打包到上线
2020-12-31 07:51:09vue项目打包到上线的基础做法总结1、开发环境到生产环境的转变项目开发结束之后,首先我们需要通知后端,获取一个线上的路径,之后将之前的开发路径切换为线上路径。打开项目中config文件夹里面的 dev.env.js 文件。...vue项目打包到上线的基础做法总结
1、开发环境到生产环境的转变
项目开发结束之后,首先我们需要通知后端,获取一个线上的路径,之后将之前的开发路径切换为线上路径。
打开项目中config文件夹里面的 dev.env.js 文件。
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
// BASE_API: '"http://192.168.1.***:3838/"' //开发者路径
BASE_API: '"http://sdk.********.cn:3838/"' //线上路径,替换开发者路径
})
打开项目中config文件夹里面的prod.env.js 文件,将后端给的线上路径填入。
'use strict'
module.exports = {
NODE_ENV: '"production"',
BASE_API: '"http://sdk.*********.cn:3838/"' //线上路径
}
2、设置统一的请求路径
犹豫项目打包之后,所有的js,css,图片都会在各自统一的文件夹内,所以,之前的路径需要改掉,单个修改花费时间太长,那么应该怎么做呢。
打开build文件夹里面的utils.js,根据需求添加,通常会添加两个../。
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath : '../../' //新添加的内容,路径配置
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
在某种情况下,会出现html主路径引入不正确的问题,这时候我们需要配置config文件夹内部的index.js文件,修改assetsPublicPath,注意,这里的assetsPublicPath是build生产环境下的assetsPublicPath路径,而不是dev开发环境下的assetsPublicPath。
image.png
这个时候,就可以执行 npm run build 将项目打包,置于你们后端上线了。祝各位早日成为前端大牛,喜欢的点关注了亲亲!
qinqin.gif
-
vue项目打包publicpath_vue项目打包发布线上环境
2020-12-22 21:43:54文章目录说明发现一些朋友在群里询问如何线上发布vue项目.从而暴露出来很多有意思的问题.所以这篇博文简单介绍一下vue项目线上发布的情况.本地环境mac osnode 10.16vue 2.6vue-cli 4.0线上环境centOS6node 10.16...文章目录
说明
发现一些朋友在群里询问如何线上发布vue项目.
从而暴露出来很多有意思的问题.
所以这篇博文简单介绍一下vue项目线上发布的情况.
本地环境
mac os
node 10.16
vue 2.6
vue-cli 4.0
线上环境
centOS6
node 10.16
nginx
vue是最近很火的前端框架,
所以它依赖的是浏览器,及我们可以从浏览器定位到你服务器nginx,然后nginx把指定的静态资源转发出来,最后我们在浏览器渲染看到
不管你的服务器是iis,apache还是nginx
只要http可以定位到服务器的静态资源即可.
很多人会有问号?
那为什么我在开发的时候用node命令直接就启动了呢!
npm run dev
这是因为我们本地并没有web静态服务器去定位资源,
所以node本地启动了web服务器来守护一个进程,达到资源转发的效果,
而且vue 启动的本地server可以直接帮我们做api代理.
如下是部分关于本地server的配置
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
proxy: {
'/admin': {
target: '这里是你的代理api地址',
changeOrigin: true,
secure: false
}
}
}
所以线上发布的时候,我们服务器本来就有web服务器,完全不需要node再启动一个web服务,或者说干脆不需要node都可以.
项目build
项目build构建文件
打包压缩后的静态资源文件被放到了dist 目录下
const {
run
} = require('runjs')
const chalk = require('chalk')
const config = require('../vue.config.js')
const rawArgv = process.argv.slice(2)
const args = rawArgv.join(' ')
if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
const report = rawArgv.includes('--report')
run(`vue-cli-service build ${args}`)
const port = 9526
const publicPath = config.publicPath
var connect = require('connect')
var serveStatic = require('serve-static')
const app = connect()
app.use(
publicPath,
serveStatic('./dist', {
index: ['index.html', '/']
})
)
app.listen(port, function (){
console.log(chalk.green(`> Preview at http://localhost:${port}${publicPath}`))
if (report) {
console.log(chalk.green(`> Report at http://localhost:${port}${publicPath}report.html`))
}
})
} else {
console.log(chalk.green(`环境:${process.env.NODE_ENV},publicPath${publicPath},args:${args}`));
run(`vue-cli-service build ${args}`)
}
发布dist
把你的生成静态文件上传到服务器,
我是直接git clone
配置nginx server {
listen 80; # 监听80端口
server_name admin.yijiebuyi.com; # 浏览器域名
location / {
root /home/www/admin/dist/; # 服务器静态文件存放的目录
index index.html; # 主页
}
location /admin {
proxy_pass http://api.yijiebuyi.com/; # 代理接口地址
}
}
-
vue项目打包publicpath_Vue项目打包常见问题整理
2020-12-22 21:43:53Vue 项目在开发时运行正常,打包发布后却出现各种报错,这里整理一下遇到的问题,以备忘。1、js 路径问题脚手架默认打包的路径为绝对路径,改为相对路径。修改 config/index.js 中 build 节点下 assetsPublicPath,...Vue 项目在开发时运行正常,打包发布后却出现各种报错,这里整理一下遇到的问题,以备忘。
1、js 路径问题
脚手架默认打包的路径为绝对路径,改为相对路径。修改 config/index.js 中 build 节点下 assetsPublicPath,把原来 ‘/’ 改为 ‘./’
assetsPublicPath: './'
}
2、img 路径问题
在 build/utils.js 文件中 ExtractTextPlugin extract 节点下,添加一行:publicPath: ‘…/…/’
fallback: 'vue-style-loader'publicPath: '../../'
} ['vue-style-loader'}
3、favicon.ico 问题
① 在 build/webpack.prod.conf.js 文件中 new HtmlWebpackPlugin 节点下, 添加一行:favicon: config.build.favicon
template: 'index.html'})
② 在 config/index.js 文件中 build 节点下,添加一行 : favicon:path.resolve( __dirname,‘…/src/favicon.ico’ )( PS:favicon.ico 放在 src 目录下)
module.exports =favicon:path.resolve(__dirname,'../src/favicon.ico'}
4、IE9+ 兼容性问题
由于 axios 是基于 promise 之上实现的,在 IE 下会有兼容性问题。
① 安装 babel-polyfill
yarn add babel-polyfill
② 修改 build/webpack.base.conf.js 文件中 entry 节点
app: ['babel-polyfill','./src/main.js'}
5、禁止生成 .map 文件
修改 src/config/index.js 中 productionSourceMap 值
productionSourceMap:
-
vue-cli设置publicPath小记
2020-11-20 19:37:45几种设置publicPath后,再对比打包后的index.html文件 测试背景: 每次打包build完后,都单独生成一个/dist文件夹,且dist中每次都只有相同文件目录 部署的时候,是部署在服务器的一个/test文件夹... // publicPath: -
vue项目打包publicpath_Vue项目打包常见问题整理 -
2020-12-31 07:51:09import { PopupManager } from 'element-ui/src/utils ...vue-cli+vue-router+webpack建立项目,其中的遇到的三个问题,整理如下:vue-cli+ webpack 建立的项目,cnpm run build 打包项目之后,需要放在http服务器... -
Vue CLI4.0 webpack配置属性——publicPath
2020-04-28 17:35:45用法和 webpack 本身的 output.publicPath 一致,但是 Vue CLI 在一些其他地方也需要用到这个值,所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。 默认情况下,Vue CLI 会假设你... -
Vue-cli assets SubDirectory及PublicPath区别详解
2020-10-14 21:31:40主要介绍了Vue-cli assets SubDirectory及PublicPath区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 -
vue-cli设置publicPath几种方式对比
2020-06-11 09:40:29publicPath打包设置 1. 不设置(默认为 publicPath: ‘/’) 或者设置 publicPath: '/' // vue.config.js module.exports = { publicPath: '/', } html中被打包的css和js路径如下 <!DOCTYPE html> <... -
webpack/vue-cli 中的 publicPath / 和 ./ 的区别
2020-09-27 00:16:03webpack/vue-cli 中的 publicPath / 和 ./ 的区别 在说这个问题之前,vue-cli 的配置文档已经说的非常清楚了 publicPath 而 webpack 对于 publicPath 的描述相对苍白。但是 vue-cli 对于我们来说也是一个黑盒子,... -
新版Vue项目配置项目名称-publicPath-前端_v1.0.2
2020-06-18 14:55:36新版Vue项目配置项目名称-publicPath-前端 v1.0.0 学生宫布 8416837 webpack 4.28.4 文章目录js配置 js配置 vue.config.js module.exports = { publicPath: process.env.NODE_ENV === "production" ? "/ui-pro... -
vuecli3打包部署 非根目录下 配置vue.config.js publicPath
2020-01-07 13:49:21从 Vue CLI 3.3 起已弃用baseUrl,请使用publicPath。 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这... -
vue打包时的publicPath,就是打包后静态资源的路径
2021-03-02 16:29:58当不配置vue.config.js或者没有publicPath属性时,默认访问的静态路径是服务器的根目录 服务器根目录下没有js文件夹所以访问失败,把dist下的js,css等静态文件剪切到wamp/www目录下就可以正常访问了(注意重启wamp... -
vue 设置斜杠 , 不架在根路径,配置 publicPath & base
2020-06-18 19:09:13vue.config.js 是否为生产环境 const isProduction = process.env.NODE_ENV !== 'development' 配置 publicPath module.exports = { publicPath: isProduction ? 'portal' : '/' } -
Vue Router Next erases nested URL Public path and redirects to root /
2020-11-21 17:43:39If I deploy the app under a nested public path and build the project accordingly - The app when run - rewrites the url Bar and removes the nested path altogether. <p>I've tested with a vue-cli ... -
vue cli 打包npm install npm start 报错 Invalid options in vue.config.js: “publicPath“ is not ...
2021-03-11 21:07:39vue文档提示 baseUrl 从 Vue CLI 3.3 起已弃用,请使用publicPath。但是用了之后还报错所以 凡是出现标题这个错误的都直接将 vue.config.js 里面的 publicPath 改成 baseUrl,即可 -
[VUE ERROR] Invalid options in vue.config.js: "publicPath" is not allowed
2019-02-21 13:56:00具体原因是因为版本支持的问题,publicPath 属性到 vue-cli 3.2.0 之后才支持,所以将 publicPaht 改成 baseUrl 即可,或者升级你的 vue-cli 。 转载于:https://www.cnblogs.com/similar/p/10412056.html... -
转载- vue-cli设置publicPath小记
2020-06-09 01:41:23这篇真的写的很好。直接转了。 https://www.jb51.net/article/184694.htm -
Invalid options in vue.config.js: "publicPath" is not allowed
2020-12-30 10:39:44publicPath" is not allowed npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! insterest-web.1.0 serve: <code>vue-cli-service serve --open npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the ... -
ERROR Invalid options in vue.config.js: "publicPath" is not allowed
2019-10-11 11:35:23刚从远程clone下来的代码,npm run dev... ERROR Invalid options in vue.config.js: "publicPath" is not allowed npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! iview-admin@2.0.0 dev: `vue-cli-service s...