修改vue+webpack run build的路径方法


Posted in Javascript onSeptember 01, 2018

vue项目用webpack打包想要修改静态资源路径等,找到项目根目录下的config文件夹,打开该文件夹下的index.js文件,默认如下:

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')

module.exports = {
 build: {
 env: require('./prod.env'),
 index: path.resolve(__dirname, '../dist/index.html'),
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 productionSourceMap: true,
 // Gzip off by default as many popular static hosts such as
 // Surge or Netlify already gzip all static assets for you.
 // Before setting to `true`, make sure to:
 // npm install --save-dev compression-webpack-plugin
 productionGzip: false,
 productionGzipExtensions: ['js', 'css'],
 // Run the build command with an extra argument to
 // View the bundle analyzer report after build finishes:
 // `npm run build --report`
 // Set to `true` or `false` to always turn it on or off
 bundleAnalyzerReport: process.env.npm_config_report
 },
 dev: {
 env: require('./dev.env'),
 port: 8080,
 autoOpenBrowser: true,
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 proxyTable: {},
 // CSS Sourcemaps off by default because relative paths are "buggy"
 // with this option, according to the CSS-Loader README
 // (https://github.com/webpack/css-loader#sourcemaps)
 // In our experience, they generally work as expected,
 // just be aware of this issue when enabling this option.
 cssSourceMap: false
 }
}

其中build.index:必须是本地文件系统上的绝对路径。会生成index.html文件。

build.assetsRoot:必须是本地文件系统上的绝对路径。

build.assetsSubDirectory:编译出来的资源文件。

build.assetsPublicPath:【资源的根目录】,这是通过http服务器运行的url路径。默认情况下,是根目录(/)。如果后台对静态资源url前缀要求,则需要改变这个路径。

build.productionSourceMap:在构建生产环境版本时是否开启source map。

以上这篇修改vue+webpack run build的路径方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 常用操作整理 基础入门篇
Oct 14 Javascript
JS模拟面向对象全解(一、类型及传递)
Jul 13 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
Apr 07 Javascript
七个很有意思的PHP函数
May 12 Javascript
用svg制作富有动态的tooltip
Jul 17 Javascript
JavaScript判断数字是否为质数的方法汇总
Jun 02 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
Mar 31 Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 Javascript
vue axios基于常见业务场景的二次封装的实现
Sep 21 Javascript
详解JSON和JSONP劫持以及解决方法
Mar 08 Javascript
解决vue项目使用font-awesome,build后路径的问题
Sep 01 #Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
Sep 01 #Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 #Javascript
解决在vue项目中webpack打包后字体不生效的问题
Sep 01 #Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 #Javascript
vue解决使用webpack打包后keep-alive不生效的方法
Sep 01 #Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 #Javascript
You might like
PHP5中MVC结构学习
2006/10/09 PHP
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
YUI的Tab切换实现代码
2010/04/11 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
AngularJS进行性能调优的7个建议
2015/12/28 Javascript
基于jQuery实现仿百度首页选项卡切换效果
2016/05/29 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
2017/08/29 Javascript
Javascript节流函数throttle和防抖函数debounce
2020/12/03 Javascript
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
基于Python List的赋值方法
2018/06/23 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
Python实现深度遍历和广度遍历的方法
2019/01/22 Python
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
澳大利亚汽车零部件、音响及配件超市:Automotive Superstore
2018/06/19 全球购物
Timberland德国官网:靴子、鞋子、衣服、夹克及配件
2019/12/10 全球购物
斯洛伐克电子产品购物网站:DATART
2020/04/05 全球购物
自我鉴定书面格式
2014/01/13 职场文书
小学生暑假感言
2014/02/06 职场文书
怎样写好自我评价呢?
2014/02/16 职场文书
诚信承诺书模板
2014/05/26 职场文书
材料物理专业求职信
2014/09/01 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
教师党员批评与自我批评发言稿
2014/10/15 职场文书
工作自我推荐信范文
2015/03/25 职场文书
退休劳动合同怎么写?
2019/10/25 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
redis复制有可能碰到的问题汇总
2022/04/03 Redis