修改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函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
jQuery 对Select的操作备忘记录
Jul 04 Javascript
基于JQuery的Select选择框的华丽变身
Aug 23 Javascript
window.location.href IE下跳转失效的解决方法
Mar 27 Javascript
JavaScript判断变量是对象还是数组的方法
Aug 28 Javascript
jQuery编程中的一些核心方法简介
Aug 14 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
Dec 04 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
Jun 02 Javascript
仿百度换肤功能的简单实例代码
Jul 11 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
Dec 27 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 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
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
laravel5.2表单验证,并显示错误信息的实例
2019/09/29 PHP
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
nullJavascript中创建对象的五种方法实例
2013/05/07 Javascript
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
javascript 实现子父窗体互相传值的简单实例
2014/02/17 Javascript
使用javascript实现监控视频播放并打印日志
2015/01/05 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
bootstrap中的 form表单属性role="form"的作用详解
2017/01/20 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
vue实现点击展开点击收起效果
2018/04/27 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
2019/09/16 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
pycharm 使用心得(七)一些实用功能介绍
2014/06/06 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
解决Python列表字符不区分大小写的问题
2019/12/19 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
QML实现钟表效果
2020/06/02 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
英国玛莎百货美国官网:Marks & Spencer美国
2018/11/06 全球购物
软件配置管理有什么好处
2015/04/15 面试题
汇科协同Java笔试题
2012/03/31 面试题
大学生年度自我鉴定
2013/10/31 职场文书
七一讲话心得体会
2014/09/05 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
公司人事任命通知
2015/04/20 职场文书
Python3 如何开启自带http服务
2021/05/18 Python
CSS中实现动画效果-附案例
2022/02/28 HTML / CSS