vuecli2多页面 实测成功

仿照vuecli生成的index.html    及src文件夹下面的main.js,App.vue   3个文件在复制一次(位置不变)

例如

建立newpage.html 复制index.html的内容 (修改div的id为newpage) 

 

建立Newpage.vue复制App.vue的内容

修改id为newpage

name:'Newpage'

 

 

建立newpage.js复制main.js的内容(

修改import App from './App'    变为  import Newpage  from'./Newpage.vue'     ==>.vue不能少

修改 new Vue  里面的el为#newpage   

components: { Newpage},
template: '<Newpage/>'

)   

修改config/index.js   

找到

index: path.resolve(__dirname, '../dist/index.html'),
下面加上
newpage: path.resolve(__dirname, '../dist/newpage.html'),

 

修改build/webpack.base.conf.js

module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
  app: './src/main.js',
  newpage:'./src/newpage.js'
},

 

修改build/webpack.dev.conf.js

 

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true
}),
新加下面的
new HtmlWebpackPlugin({
  filename: 'newpage.html',
  template: 'newpage.html',
  inject: true,
  chunks:['newpage']
}),

 

修改build/webpack.prod.conf.js

new HtmlWebpackPlugin({
  filename: config.build.index,
  template: 'index.html',
  inject: true,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
    // more options:
    // https://github.com/kangax/html-minifier#options-quick-reference
  },
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: 'dependency'
}),
新加下面的
new HtmlWebpackPlugin({
  filename: config.build.newpage,
  template: 'newpage.html',
  inject: true,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
    // more options:
    // https://github.com/kangax/html-minifier#options-quick-reference
  },
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: 'dependency',
  chunks: ['manifest','vendor','newpage']
}),

 

因为是临时才知道是多页面,整个项目页面已完成  要跳转的话就是在这个新加的Newpage.vue页面里面加入钩子函数进行路由跳转    我的入口只有2个  就只需要加一个页面    以此例推

然后npm run build打包  完事

参考https://blog.csdn.net/cookysurongbin/article/details/79107706

posted @ 2018-12-25 18:00  徐言身寸  阅读(528)  评论(2)    收藏  举报