VUE多页应用搭建

版权声明：感谢您的阅读，本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/weixin_43249693/article/details/82883842

这篇文章是我看视频后总结的，尽可能的细致的记录了下来。
如果有哪里说的不对或者不全的，大家告诉我，我会及时修改。

demo演示说明

http://localhost:8088/user.index.html#/下有路由http://localhost:8088/user.index.html#/u，可以在这个路由上点击跳到http://localhost:8088/goods.index.html#/;

http://localhost:8088/goods.index.html#/下有路由http://localhost:8088/goods.index.html#/g，可以在这个路由上点击跳到``````http://localhost:8088/user.index.html#/;

跳转通过a标签的url实现。

VUE多页应用配置

• 核心思想: 两个vue单页项目，同时放在src目录下，一次webpack打包，跳转用url
• 所需插件 webpack-webpack-plugin
  • webpack操作:
    • 1. 多个入口 { main1:’./usermain.js’,main2:’./goodsmain.js’ }
      2. 用多次html插件

原理：

目录结构

只做参考，具体以项目目录为准

webpack.base.conf.js 配置入口

// module.exports中： 
// 相对于项目根目录的，可以通过node的方式遍历，这里现在先写死
  entry: {
    user: './src/user/main.js',		// 对应user项目
    goods: './src/goods/main.js'	// 对应goods项目
  },

• 给dist分目录的话，通过 output

生产环境的配置

webpack.prod.conf.js

每用一次html-webpack-plugin就是对一个vue单页项目做打包，可以遍历( 加到plugins里面去 )，这里先写死。

// 对user项目
new HtmlWebpackPlugin({
    filename: 'user.index.html',
    template: path.join(__dirname, '../src/user/index.html'),
    /* chunks 描述里面具体的块
    ** 	manifest 关联清单，抽第三方包
    **  vendor 第三方库
    **  filename 自己, 起个名字。入口实际就是entry的key
    */
    chunks: ['manifest', 'vendor', 'user'],
    inject: true,
    minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
    },
    chunksSortMode: 'dependency'
}),
// 对goods项目 
new HtmlWebpackPlugin({
    filename: 'goods.index.html',
    template: path.join(__dirname, '../src/goods/index.html'),
    chunks: ['manifest', 'vendor', 'goods'],
    inject: true,
    minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
    },
    chunksSortMode: 'dependency'
}),

• 注意事项

  // 文件名称
  filename: filename + '.html',
  // 页面模板需要加对应的js脚本，如果不加这行则每个页面都会引入所有的js脚本
  chunks: ['manifest', 'vendor' , filename],
  inject: true
  

• 生成的dist目录结构

  

• getHtmls的思路

  • 更为灵活的读取各项目下的js文件（入口） entry:{‘js文件名’:‘js文件路径’ }
  • 更为灵活的读取各项目下的html文件（首页.html） plugins:[].concat( [ new HtmlWebpackPlugin(),new HtmlWebpackPlugin() ] )
    • filename属性是生成的相对dist的文件名 xxx.html
    • template 模板生成的参照物 需要绝对路径||相对路径 ‘./xxx.html’
    • chunks:[filename] 指定第三引入的js文件名称
    • 
      • 这个[name]其实就是entry的key

开发环境的配置

• 同开发环境配置。

生产环境和开发环境配置的合并（可以直接看这里~~）

• 思路：把插件配置提出来，放到webpack.base的plugins 里面

  1. 在build中新建自己的插件配置 -> myHtmlWabpackPlus.js

     const HtmlWebpackPlugin = require('html-webpack-plugin');
     const path = require('path');
     module.exports = [
         // user项目
         new HtmlWebpackPlugin({
             filename: 'user.index.html',
             template: path.join(__dirname, '../src/user/index.html'),
             /* chunks 描述里面具体的块
             ** 	manifest 关联清单，抽第三方包
             **  vendor 第三方库
             **  filename 自己, 起个名字
             */
             chunks: ['manifest', 'vendor', 'user'],
             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'
           }),
           // goods项目
           new HtmlWebpackPlugin({
             filename: 'goods.index.html',
             template: path.join(__dirname, '../src/goods/index.html'),
             chunks: ['manifest', 'vendor', 'goods'],
             inject: true,
             minify: {
                 removeComments: true,
                 collapseWhitespace: true,
                 removeAttributeQuotes: true
             },
             chunksSortMode: 'dependency'
         })
     ]
     

  2. webpack.base.js中引入myHtmlWabpackPlus.js

     首先引入

     const myHtmlWabpackPlus = require('./myHtmlWebpackPlus')
     

     在module.exports 中加入

     // 根属性 plugins:[]
     plugins: myHtmlWabpackPlus
     

     • ***注意：***一定要先删掉webpack.prod.conf.js和webpack.dev.conf.js中的 new HtmlWebpackPlugin部分

部署:

• 解决 多页默认显示哪个页面为首页:

  • 开发环境： 有两种方式

    1. package.json scripts的dev配置--open-page xxx.html如：

       "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --open-page user.index.html"

       • 注意顺序

    2. 打开的时候需要在端口号后加上某个页面的路径，如：http://localhost:8081/user.index.html#/，否则显示Cannot GET。

       路径名称是dist目录生成的文件的名字。

  • 生产环境配置 server(服务器)节点

    以nginx为例： 打开nginx.conf

  server {
  	listen       9527;	
  	server_name  localhost;
       location / {
               root   html;
               index  user.index.html user.index.htm;
       }
  }
  

参考： 开课吧涂老师视频