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

 更新时间:2018年09月01日 16:34:45   作者:若晨工作室  
今天小编就为大家分享一篇修改vue+webpack run build的路径方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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的路径方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Element ui中menu组件(el-menu/el-menu-item/el-submenu/template)层级结构与用法示例

    Element ui中menu组件(el-menu/el-menu-item/el-submenu/template)

    最近在使用Element开发时遇到了不少问题,下面这篇文章主要给大家介绍了关于Element ui中menu组件(el-menu/el-menu-item/el-submenu/template)层级结构与用法的相关资料,需要的朋友可以参考下
    2022-12-12
  • 关于Vue中的watch监视属性

    关于Vue中的watch监视属性

    这篇文章主要介绍了关于Vue中的watch监视属性,Vue中的watch默认不监视对象内部值的改变,当被监视的属性变化时,回调函数自动调用,进行相关操作,需要的朋友可以参考下
    2023-04-04
  • vue实现垂直无限滑动日历组件

    vue实现垂直无限滑动日历组件

    这篇文章主要为大家详细介绍了vue实现垂直无限滑动日历组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 在Uni中使用Vue的EventBus总线机制操作

    在Uni中使用Vue的EventBus总线机制操作

    这篇文章主要介绍了在Uni中使用Vue的EventBus总线机制操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue实现定时刷新数据,每隔5分钟执行一次

    vue实现定时刷新数据,每隔5分钟执行一次

    这篇文章主要介绍了vue实现定时刷新数据,每隔5分钟执行一次问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue自定义指令合集(超实用!)

    vue自定义指令合集(超实用!)

    Vue自定义指令是Vue中一种非常有用的扩展能力,它允许你在标准的模板语法中使用自定义行为,而不需要编写新的组件或者混入,这篇文章主要给大家介绍了关于vue自定义指令的相关资料,需要的朋友可以参考下
    2024-03-03
  • vue 部署上线清除浏览器缓存的方式

    vue 部署上线清除浏览器缓存的方式

    这篇文章主要介绍了vue 部署上线清除浏览器缓存的方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue+Echart实现立体柱状图

    vue+Echart实现立体柱状图

    这篇文章主要为大家详细介绍了vue+Echart实现立体柱状图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue3引入highlight.js进行代码高亮的方法实例

    vue3引入highlight.js进行代码高亮的方法实例

    最近忙着开发自己的开发脚手架,在做代码生成器的时候,有个预览功能,需要让代码高亮,下面这篇文章主要给大家介绍了关于vue3引入highlight.js进行代码高亮的相关资料,需要的朋友可以参考下
    2022-04-04
  • Vue前端如何设置Cookie和鉴权问题详解

    Vue前端如何设置Cookie和鉴权问题详解

    这篇文章主要介绍了前端如何设置和使用Cookie,并对比了Cookie和Token在鉴权中的优缺点,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-02-02

最新评论