修改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 相关文章推荐
验证手机号码的JS方法分享
Sep 10 Javascript
js 对小数加法精度处理示例说明
Dec 27 Javascript
jQuery选择器全面总结
Jan 06 Javascript
js获取及判断键盘按键的方法
Dec 01 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
node.js 利用流实现读写同步,边读边写的方法
Sep 11 Javascript
JS实现图片旋转动画效果封装与使用示例
Jul 09 Javascript
详解mpvue scroll-view自动回弹bug解决方案
Oct 01 Javascript
用图片替换checkbox原始样式并实现同样的功能
Nov 15 Javascript
微信小程序实现锚点功能
Nov 20 Javascript
Vue组件为什么data必须是一个函数
Jun 11 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 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
php设计模式之命令模式使用示例
2014/03/02 PHP
ThinkPHP模板Switch标签用法示例
2014/06/30 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
再论Javascript下字符串连接的性能
2011/03/05 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
2013/07/17 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
vue-router 起步步骤详解
2019/03/26 Javascript
nodejs文件夹深层复制功能
2019/09/03 NodeJs
js实现无缝轮播图效果
2020/03/09 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
python实现清屏的方法
2015/04/30 Python
Python GUI Tkinter简单实现个性签名设计
2018/06/19 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
Python闭包和装饰器用法实例详解
2019/05/22 Python
详解Python中的分支和循环结构
2020/02/11 Python
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
2012/12/30 HTML / CSS
Ellos丹麦:时尚和服装在线
2016/09/19 全球购物
工商管理专业学生的自我评价
2013/10/01 职场文书
优秀员工自荐信范文
2013/10/05 职场文书
营销专业应届生求职信
2013/11/26 职场文书
材料加工工程求职信
2014/02/19 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android
德生TECSUN S-2000使用手册文字版
2022/05/10 无线电