首页 > 其他分享 >vue打包记录

vue打包记录

时间:2022-08-24 15:02:36浏览次数:63  
标签:index vue 记录 chunk title js html template 打包

这里的确是css以及js文件的路径问题,但解决时并不需要手动改路径或者加一段判断去修改,最方便的办法时在项目打包前的vue.config.js里面将publicPath属性添加或者修改为 publicPath: ‘./’, 然后重新打包

module.exports = {
    publicPath: './',
    assetsDir: 'static',
    pages: {
        index: {
            // page 的入口
            entry: 'src/main.js',
            // 模板来源
            template: 'public/index.html',
            // 在 dist/index.html 的输出
            filename: 'index.html',
            // 当使用 title 选项时,
            // template 中的 title 标签需要是 
            // title: 'Index Page',
            // 在这个页面中包含的块,默认情况下会包含
            // 提取出来的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common', 'index']
        },
        subpage: {
            // page 的入口
            entry: 'src/submain.js',
            // 模板来源
            template: 'public/subindex.html',
            // 在 dist/index.html 的输出
            filename: 'subindex.html'
            // 当使用 title 选项时,
            // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
        }
        // 当使用只有入口的字符串格式时,
        // 模板会被推导为 `public/subpage.html`
        // 并且如果找不到的话,就回退到 `public/index.html`。
        // 输出文件名会被推导为 `subpage.html`。
        //subpage: 'src/submain.js'
    },
    // configureWebpack: {
    //     devtool:'source-map'
    // }
}

  

标签:index,vue,记录,chunk,title,js,html,template,打包
From: https://www.cnblogs.com/supercoding/p/16619923.html

相关文章

  • vue-route
    $route.path类型:string字符串,对应当前路由的路径,总是解析为绝对路径,如/foo/bar。$route.params类型:Object一个key/value对象,包含了动态片段和全匹配片段......
  • Docker也疯狂,微服务一键打包部署
    微服务Docker打包现在的微服务时代,你的代码没个微服务、分布式人家都会觉得低端,当然!对于我们开发人员来说,掌握这些技术意味着涨薪。​ 我们项目中用到了多个微服务,我......
  • 常用网址记录
    阿里图标https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.da2e3581b&type=1uviewhttps://www.uviewui.com/components/intro.html......
  • vue初始化data数据
     初始化datathis.$data= this.$options.data() 初始化data中form this.$data.form=this.$options.data().form......
  • 【Vue模板报错】关于 The template root requires exactly one element 报错的解决方
    报错内容  报错原因Vue只允许模板里存在一个根节点。解决方案在<template>中添加一个<div>标签,之后所有的组件全部加在<div>即可解决。 ......
  • vue样式穿透
    1、vue单文件组件作用域当<style>标签带有scoped attribute的时候,它的CSS只会影响当前组件的元素,和ShadowDOM中的样式封装类似。使用时有一些注意事项,不过好处是......
  • vue3 在setup 外部调用 useStore() 为 undefined 解决
    场景:在router/index.ts中想要获取storeimport{useStore}from'@/vuex';conststore=useStore()console.log('appstore',store)//undefined 在App.vue,或者......
  • 【Vue】图片裁剪功能支持
     一、效果展示:1、表单的图片上传项:-新增时默认一个空白Input框-更新时展示以往上传存放的图片,-点击【查看】浏览完整大小-点击【删除】清空src地址,重新......
  • Linux安装Vue环境
    原文链接nodejsnodejs下载地址:https://nodejs.org/en/download/下载后上传到服务器,并解压。进入解压的文件夹,可以查看版本:./bin/node-v建立node软连接,变为全......
  • 若依vue部署遇到的一些问题
    背景:生产服务器9000端口,更目录/用于跳转到vue打好的包下,/scoreMange-prod-api用于匹配后台接口;在域名映射ip的时候遇到了问题,一级Nginx配置:  二级Nginx配置:  ......