亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run build(在package.json的scripts配置) 执行成功如下图所示: 然后此时你会发现项目下多了一个 dist 文件夹,dist下文件便是项目打包之后生成的文件. 此时我们直接在浏览器中打开index.html,是会报错的,什么都看不到. 2. 安装express-generator生成

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

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

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

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

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

当用vue-cli自动构建项目后,有两种运行方法,分别是: npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片. npm run build : 打包项目,资源使用相对路径,所以会出现路径错误问题. 绝对路径:从盘符开始的路径,如:C:\windows\system32\cmd.exe 相对路径:从当前路径开始的路径 我项目中静态图片都是放在和src同级的static目录中,写的都是相对路径 开发过程中npm run dev读取图片是没问题的,

问题描述: 自己在自学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:'../../' 如下图: 这样就解决这个问题.

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

首先得说一下,vue项目中productionSourceMap这个属性.该属性对应的值为true|false.   当productionSourceMap: true,时: 1.打包后能看到xxxx.js.map文件,map文件够通过反编译看到源码; 2.打包后会导致文件变大(因为多了很多map文件导致的):   当productionSourceMap: false,时: 1.打包后无法看到xxxx.js.map文件,所以无法进行反编译; 2.打包后的文件很小(因为没有map文件);  如

最近做的vue项目,本地测试完成后,build上线,却发现了文件路径问题,提示各种诸如js,css等资源找不到的错: 正确解决方式有两种,一种是绝对路径配置,详细可以网上查,个人推荐第二种相对路径,这样的话,项目迁移比较方便: 具体配置如下: 第一步: 要注意:是config/index.js下的build对象,不要改错了 第二步: 这个是在build/utils.js里. ok,正常运行.

补充 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

在build->webpack.base.conf.js里添加一句代码: 具体位置在module->rules下 publicPath:"../../",

1.记得改一下config下面的index.js中bulid模块导出的路径.因为index.html里边的内容都是通过script标签引入的,而你的路径不对,打开肯定是空白的.先看一下默认的路径. assetsPublicPath默认的是  ‘/’  也就是根目录.而我们的index.html和static在同一级目录下面.  所以要改为  ‘./ ’ 2.另外还需要注意一点.src里边router/index.js路由配置里边默认模式是hash,如果你改成了history模式的话,打开也会是一

1, 2,

1.文件引用路径.我们直接运行打包后的文件夹中的index.html文件,会看到网页一片空白,f12调试,全是css,js路径引用错误的问题. 解决:到config文件夹中打开index.js文件. assetsPublicPath属性作用是指定编译发布的根目录,'/'指的是项目的根目录 ,'./'指的是当前目录. build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), /

vue项目打包 一.终端运行命令 npm run build 二.打包成功的标志与项目的改变,如下图: 3.点击index.html,通过浏览器运行,出现以下报错,如图: 四.那么应该如何修改呢?具体步骤如下:1.查看package.js文件的scripts命令2.打开webpack.dev.conf.js文件,找到publicPath: config.dev.assetsPublicPath,按Ctrl点击,跳转到index.js文件3.其中dev是开发环境,build是构建版本,找到buil

默认情况下vue项目打包后,本地打开index.html是空白的,有报错.Failed to load resource: net::ERR_FILE_NOT_FOUND 这时需要修改config->index.js 这时再打包,页面能看到了,但是好多引用的文件路径不对. 然后再修改build->utils.js ,加上publicPath:'../../' 再打包,就好了

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