使用vue-cli3.x正确打包项目,配合nginx运行打包后的内容 vue.config.js module.exports = { publicPath: './',//打包后的位置(如果不设置这个静态资源会报404) outputDir: 'dist',//打包后的目录名称 assetsDir: 'static'//静态资源目录名称 } router.js export default new Router({ mode: 'history',//配合nginx本地才能正常的使用histo

1, 2,

目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 online github Vue cli 3.0 使用 svg-symbol(svg 雪碧图),整个 https://www.iconfont.cn 的图标库为你所用,加快开发速度. Vue 脚手架升级 3.0,项目也随

vue webpack打包后 iconfont引入路径不对 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } 将 limit 的值 调的大些 至少比你的字体文件大

vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath:'../../' //添加这句话 }) } else { return ['vue-style-loader'

昨天一个Vue项目打包后,今天测试,发现无论localhost还是服务器上都运行不了,报错如下: Failed to load resource: the server responded with a status of 400 (Bad Request) 网上搜索一圈,牛头不对马嘴的居多,向一前辈请教后,问题迎刃而解,现将方法分享如下: 其实超级简单!超级简单!超级简单!重要是事情说三遍,只需----------> 找到node_modules/@vue/cli-service/lib/op

在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了,解决方法如下: 注意:如果整体为空白,记得先改===>>> 1.记得改一下config下面的index.js中bulid模块导出的路径.因为index.html里边的内容都是通过script标签引入的,而你的路径不对,打开肯定是空白的.先看一下默认的路径. module.exports =

使用的是vue-element-admin做示例,可以参考Vue项目根据不同运行环境打包项目,其他项目应该大同小异. 使用vue-router的browserHistory模式,配置mode: 'history', 有更好的体验. 目的: 想将项目打包后发布到apache的www下的vue子目录 先讲结论: 需要修改router/index.js中new Router 配置,加一个base: '/vue/', 它指定应用的基路径,该应用是服务于localhost/vue路径下,所以必须加base

vue中webpack打包后vendor.xxx.js文件一般都特别大,其原因是因为我们引用的依赖都被压缩成一个js文件,这样会导致vendor文件过大.页面加载速度过慢,影响用户体验.所以我们就要把用不到的依赖都抽出来,在index.html用第三方引入! 话不多说,上代码! 依赖未抽出前打包: 依赖抽出之后打包: 在这里我把一般都会引入的element-ui抽出来了! 在build目录下找到文件修改如下: 添加这个对象属性:前面为依赖名称,这样打包的时候就不会把这两个依赖打包进vendor,

vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就会使路径错误: 解决办法: 办法一: 把不需要编译的东西,直接放在static文件下,css引用的时候直接写相对路径: 具体原因看:https://segmentfault.com/q/1010000009842688(大致是static文件夹下的东西不会经过编译) 办法二:进行wepack配置:

安装完vue后搭建了一个项目,直接执行 npm run dev 是可以正常打开页面的: 但是执行 npm run build 打包项目后打开却报错了,如下: 原来是项目中的静态文件路径报错了... 然后就针对这个问题去查找解决方法: 第一步: 第二步: 找到下面文件,添加一行代码: publicPath: '../../' 第三步: 重新执行 npm run build  ,再次打开成功 说明:  这里的打开方式:在builder编辑器里面直接打开打包后的dist文件夹下的index.html,

之前写一个项目,一直放在谷歌浏览器调试测试,到尾声时放到IE浏览器结果直接白屏,页面打不开 找了网上的方法,加了babel-polyfill插件后还是不行,后来排查发现是打包插件出了问题,因为用的项目框架比较旧了,vue和webpack的版本都比较低.原始项目webpack配置 const UglifyJsPlugin = require('uglifyjs-webpack-plugin') plugins: [ new UglifyJsPlugin({ uglifyOptions: { com

资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根路径,那么要解决这种问题,就得引用相对路径. 解决办法 打开webpack.prod.conf.js 找到output:增加 publicPath: './', 即可,如图. 那么这样后,资源的引用路径就正确了. 当然在config文件夹下的index.js中修改 assetsPubl

网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通过手机打开一片空白.这个主要原因是路径的问题. 1.记得改一下config下面的index.js中bulid模块导出的路径.因为index.html里边的内容都是通过script标签引入的,而你的路径不对,打开肯定是空白的.先看一下默认的路径. assetsPublicPath默认的是 ‘/’ 也就是根目录.而我们的index.html和static在同一级目录下面. 所以要改为 ‘./ ’. 当资

最近在写vue-webpack项目时,打包后遇到了css背景图片路径报错的问题 奇怪的是,通过img标签引入的图片路径却没有问题,看来是webpack在打包后,读取css中图片的相对路径出错了. 稍微查了一些资料,发现是webpack自身问题.在webpack中,js和css引入资源的路径是不一样的,js是以调用的位置决定的,而css是以自身的位置决定的,这就导致了css的资源多套了一到多层. 在vue项目中,解决方法也炒鸡简单,只需改一下配置即可: //build/utils.js if (o

问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的,可使用npm run build命令打包后,访问dist目录下的项目,页面背景图路径就不对了,显示不出背景图.如下两张图对比 图一:使用npm run dev命令访问 图二:使用npm run build命令打包之后,访问dist目录下的文件,出现的问题,背景图片路径变成了http://127.0

使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的,可使用npm run build命令打包后,访问dist目录下的项目,页面背景图路径就不对了 解决方法:只需要在build/utils.js文件中添加如下一行代码即可. publicPath:'../../' 如下图: 这样就解决这个问题.

补充 https://www.cnblogs.com/richard1015/p/8526988.html vue webpack 打包编译-webkit-box-orient: vertical 后消失 解决方案 optimize-css-assets-webpack-plugin这个插件的问题 注释掉webpack.prod.conf.js中下面的代码   new OptimizeCSSPlugin({ cssProcessorOptions: config.build.production

cli2版本: 将 config/index.js 里的 assetsPublicPath 的值改为 './' . build: { ... assetsPublicPath: './', ... } cli3版本: 在根目录下新建 vue.config.js 文件,然后加上以下内容:(如果已经有此文件就直接修改) module.exports = { publicPath: '', // 相对于 HTML 页面(目录相同) } 参考链接: 1. vue打包静态资源路径不正确的解决办法 2. V

vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改 默认配置: env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', 修改为: env

vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPublicPath 中的'/'成为'./' 2.在build => util.js 里找到ExtractTextPlugin.extract增加一行:publicPath: '../../',主要解决背景图片路径的问题.