vue-cli 3.x 配置多页面应用程序（配置文件vue.config.js ）

最新推荐文章于 2024-03-01 09:25:30 发布

sleepwalker_1992

最新推荐文章于 2024-03-01 09:25:30 发布

阅读量1.4k

点赞数 1

分类专栏： Vue 文章标签： vue.config.js

本文链接：https://blog.csdn.net/sleepwalker_1992/article/details/104195973

版权

Vue 专栏收录该内容

37 篇文章 8 订阅

订阅专栏

1、在项目src文件夹下，创建一个pages文件夹，用来新建多页面的各个入口文件

（1）配置index页面，文件写在src/pages/index文件夹下，在浏览器中访问地址http://localhost:8090/index.html#/：

src/pages/index/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>index页面</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but my-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

src/pages/index/index.js

import Vue from 'vue';
import App from './index.vue';
import router from 'router/indexRoutes.js';

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

src/pages/index/index.vue

<template>
  <div class="index-app">
    <div>vue-cli 3.x 搭建的项目配置多页面</div> 
    <div>index页面</div> 
  </div>
</template>

<script>
export default {
  name: 'index-app'
}
</script>

<style>
.index-app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #3d10e0;
  margin-top: 60px;
}
</style>

（2）配置main页面，文件写在src/pages/main文件夹下，在浏览器中访问地址http://localhost:8090/main.html#/：

src/pages/main/main.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>main页面</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but my-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

src/pages/main/main.js

import Vue from 'vue';
import App from './main.vue';
import router from 'router/mainRoutes.js';

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

src/pages/main/main.vue

<template>
  <div class="main-app">
    <div>vue-cli 3.x 搭建的项目配置多页面</div> 
    <div>main页面</div> 
  </div>
</template>

<script>
export default {
  name: 'main-app'
}
</script>

<style>
.main-app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2、在vue.config.js文件中设置多页面入口

const path = require('path');

module.exports = {
    // 配置多页面入口
    pages: {
        index: {
          // page 的入口
          entry: 'src/pages/index/index.js',
          // 模板来源
          template: 'src/pages/index/index.html',
          // 在 dist/index.html 的输出
          filename: 'index.html',
          // 当使用 title 选项时，
          // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
          title: 'Index Page',
          // 在这个页面中包含的块，默认情况下会包含
          // 提取出来的通用 chunk 和 vendor chunk。
          chunks: ['chunk-vendors', 'chunk-common', 'index']
        },
        main: {
            // page 的入口
            entry: 'src/pages/main/main.js',
            // 模板来源
            template: 'src/pages/main/main.html',
            // 在 dist/main.html 的输出
            filename: 'main.html',
            // 当使用 title 选项时，
            // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: 'Main Page',
            // 在这个页面中包含的块，默认情况下会包含
            // 提取出来的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common', 'main']
        }
    },

    // 环境配置
    devServer: {
        host: '0.0.0.0',
        port: '8090',
        https: false,
        open: true
    },

    // 设置路径别名
    chainWebpack: config => {
        config.resolve.alias
            .set('@', path.join(__dirname, 'src'))
            .set('assets', path.join(__dirname, 'src/assets'))
            .set('components', path.join(__dirname, 'src/components'))
            .set('request', path.join(__dirname, 'src/request'))
            .set('router', path.join(__dirname, 'src/router'))
            .set('utils', path.join(__dirname, 'src/utils'))
            .set('views', path.join(__dirname, 'src/views'))
    }
};

3、删除文件public/index.html 、src/App.vue 、src/main.js

sleepwalker_1992

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
vue-cli 3.x 配置多页面应用程序（配置文件vue.config.js ）

vue.config.jsconst path = require('path');module.exports = { // 环境配置 devServer: { host: '0.0.0.0', port: '8090', https: false, open: true }, // 设置路...
复制链接

扫一扫