vue-cli3.0 多页面和单页面的配置以及相互之间的切换

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

　　在vue-cli3.0的脚手架中，创建了项目之后，很多配置都是都是已经生成了的，比如入口文件entry，和 output 等等都是已经设置好的，如果想要改动的话，我们需要添加 vue.config.js 去修改，在这里边官方提供了 publicPath 用来设置打包之后我们引入文件的路径，这里不支持相对路径，只能设置成觉得的路径，比如我们设置 publicPath: '/demo'；那么我们打包之后的文件在 index.html 中去加载 css 的时候就是 link='/demo/css'；还提供了 outputDir 来设置打包之后文件存放在哪里，默认的是放在 dist 下边的，这里我们也是可以去修改的；assetsDir 用来设置 css/js/img 等静态资源的存放位置

　　如果我们要修改单页面应用的入口文件可以在 vue.config.js 中的 进行处理

// vue.config.js
module.exports = {
    configureWebapck: config => {
         config.entry.app = './src/index/main.js'   
    }    
}

　　如果我们要配置成多页面的应用的话只需要：

// vue.config.js
module.exports = {
    pages: {
       index: {
          entry: './src/index/main.js',
          template: './public/index.html',
          filename: 'index.html' 
       } ,
       sec: {
         entry: './src/sec/main.js',
         template: './public/index.html',
         filename: 'sec.html'
       }  
   }
}

　　如果想进行单页面和多页面的切换的话就只需要来修改 vue.config.js 的配置就可以了

以上是 vue-cli3.0 多页面和单页面的配置以及相互之间的切换 的全部内容， 来源链接： utcz.com/z/380588.html

回到顶部