修改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 相关文章推荐
Javascript load Page,load css,load js实现代码
Mar 31 Javascript
javascript URL编码和解码使用说明
Apr 12 Javascript
jquery交替变换颜色的三种方法 实例代码
Nov 19 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
jQuery实现360°全景拖动展示
Mar 18 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 Javascript
灵活使用数组制作图片切换js实现
Jul 28 Javascript
JS弹出窗口的运用与技巧大全
Nov 01 Javascript
webpack之引入图片的实现及问题
Oct 08 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
ES6新增的数组知识实例小结
May 23 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基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
php 缩略图实现函数代码
2011/06/23 PHP
php发送post请求函数分享
2014/03/06 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
php中array_fill函数的实例用法
2021/03/02 PHP
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
2007/06/29 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
Js实现网页键盘控制翻页的方法
2014/10/30 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
JavaScript订单操作小程序完整版
2017/06/23 Javascript
jquery.validate.js 多个相同name的处理方式
2017/07/10 jQuery
超级简易的JS计算器实例讲解(实现加减乘除)
2017/08/08 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
解决Antd Table表头加Icon和气泡提示的坑
2020/11/17 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
利用Python中的pandas库对cdn日志进行分析详解
2017/03/07 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
python调试神器PySnooper的使用
2019/07/03 Python
Python 如何提高元组的可读性
2019/08/26 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
Python基于template实现字符串替换
2020/11/27 Python
西班牙宠物用品和食品网上商店:Tiendanimal
2019/06/06 全球购物
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
房屋转让协议书
2014/04/11 职场文书
个性婚礼策划方案
2014/05/17 职场文书
小孩不笨观后感
2015/06/03 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript
oracle删除超过N天数据脚本的方法
2022/02/28 Oracle