关于vue项目多页面的配置

基于vue2.0生成项目，一段时间都在找如何配置成多个页面的。网上有这样的例子相对也是比较详细的，但是还是有些许不一样的地方的。所以，我还是记录下来，当然我也是参考了网上的资料的。

当然先来个vue的项目，打开命令行工具，对边进入一个目录下。

vue init webpack my-project

注意，node和npm的版本，npm版本最好是3.0+的。其中my-project是自定义的项目名，按照步骤一步一步来就好了，然后进入自动生成的文件夹下，下载依赖的包，然后运行，应该会打开浏览器的localhost:8080。

npm install
npm run dev

如果不出意外是能够打开页面的。

然后你就可以在项目的基础上开心的写组件了，那么我们应该怎么修改vue的配置，让我们的项目是多个页面的呢。

第一步

在index.html同级目录下新增一个页面，welcome.html，然后在src目录下，添加Welcome.vue和welcom_main.js。

第二步修改配置，配置项有4个文件：

build//文件夹下
webpack.base.conf.js
webpack.dev.conf.js
webpack.pro.conf.js
config文件夹下
index.js

其中所有的配置，有index的地方，都需要在复制一份。

比如index.js中:

build:{
  play:path.resolve(__dirname, ‘../dist/welcome.html‘), //新增的配置
}

webpack.base.conf.js中

entry:{
  welcome: ‘./src/welcome_main.js‘, //新增的配置
}

其他配置文件里的改动都类似。复制粘贴，然后改吧改吧就好了。

配置完后，运行下 npm run dev

不过这种方式的多页面配置，每次新加一个页面，必须重新配置一次，比较麻烦，如果页面不多，倒也是可行的，但是如果随着项目越来越多，到时候项目目录就很不简洁了。

所以，还有一种一劳永逸的方式。原理其实一样的，不过是文件的配置让文件自动生成。

项目生成方式还是一样，接下来的配置有点不同。

第一步：安装一个包glob 很重要的包

npm install  glob --save-dev

第二步配置config下面的index.js文件

var path = require(‘path‘)
var glob = require(‘glob‘)

var build = {
  env: require(‘./prod.env‘),
  //index: path.resolve(__dirname, ‘../dist/index.html‘),
  assetsRoot: path.resolve(__dirname, ‘../dist‘),
  assetsSubDirectory: ‘static‘,
  assetsPublicPath: ‘/‘,
  productionSourceMap: true,
  productionGzip: false,
  productionGzipExtensions: [‘js‘, ‘css‘],
  bundleAnalyzerReport: process.env.npm_config_report
}

//根据getEntry获取所有入口主页面
var pages = getEntry(‘src/pages/**/*.html‘);

//每个入口页面生成一个入口添加到build中
for (var pathname in pages) {
  build[pathname] = path.resolve(__dirname, ‘../dist/‘ + pathname + ‘.html‘)
}

module.exports = {
  build: build,//生成的配置build
  dev: {
    env: require(‘./dev.env‘),
    port: 8080,
    autoOpenBrowser: false,
    assetsSubDirectory: ‘static‘,
    assetsPublicPath: ‘/‘,
    proxyTable: {},
    cssSourceMap: false
  }
}

//获取所有入口文件
function getEntry(globPath) {
  var entries = {},
    basename;

  glob.sync(globPath).forEach(function(entry) {

    basename = path.basename(entry, path.extname(entry));
    entries[basename] = entry;
  });
  return entries;
}

这样就配置完了index.js了。

然后是配置webpack.base.conf.js

var path = require(‘path‘)
var glob = require(‘glob‘)
var utils = require(‘./utils‘)
var config = require(‘../config‘)
var vueLoaderConfig = require(‘./vue-loader.conf‘)
var entries = getEntry(‘./src/pages/**/*.js‘)

function resolve(dir) {
  return path.join(__dirname, ‘..‘, dir)
}

module.exports = {
  entry: entries,
  output: {
    path: config.build.assetsRoot,
    filename: ‘[name].js‘,
    publicPath: process.env.NODE_ENV === ‘production‘ ? config.build.assetsPublicPath : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: [‘.js‘, ‘.vue‘, ‘.json‘],
    modules: [
      resolve(‘src‘),
      resolve(‘node_modules‘)
    ],
    alias: {
      ‘vue$‘: ‘vue/dist/vue.common.js‘,
      ‘src‘: resolve(‘src‘),
      ‘assets‘: resolve(‘src/assets‘),
      ‘components‘: resolve(‘src/components‘)
    }
  },
  module: {
    rules: [{
      test: /\.vue$/,
      loader: ‘vue-loader‘,
      options: vueLoaderConfig
    }, {
      test: /\.js$/,
      loader: ‘babel-loader‘,
      include: [resolve(‘src‘), resolve(‘test‘)]
    }, {
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      loader: ‘url-loader‘,
      query: {
        limit: 10000,
        name: utils.assetsPath(‘img/[name].[hash:7].[ext]‘)
      }
    }, {
      test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
      loader: ‘url-loader‘,
      query: {
        limit: 10000,
        name: utils.assetsPath(‘fonts/[name].[hash:7].[ext]‘)
      }
    }]
  }
}

//获取入口js文件
function getEntry(globPath) {
  var entries = {},
    basename, tmp, pathname;

  glob.sync(globPath).forEach(function(entry) {
    basename = path.basename(entry, path.extname(entry));
    pathname = basename.split("_")[0];
    entries[pathname] = entry;
  });
  return entries;
}

这个文件主要是配置entry: entries入口js。具体就不多说了，剩下的两个配置文件类似。我直接复制代码了。

webpack.dev.conf.js文件的配置

var utils = require(‘./utils‘)
var webpack = require(‘webpack‘)
var config = require(‘../config‘)
var merge = require(‘webpack-merge‘)
var baseWebpackConfig = require(‘./webpack.base.conf‘)
var HtmlWebpackPlugin = require(‘html-webpack-plugin‘)
var FriendlyErrorsPlugin = require(‘friendly-errors-webpack-plugin‘)
var glob = require(‘glob‘)
var path = require(‘path‘)

Object.keys(baseWebpackConfig.entry).forEach(function(name) {
  baseWebpackConfig.entry[name] = [‘./build/dev-client‘].concat(baseWebpackConfig.entry[name])
})

module.exports = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
  },
  devtool: ‘#cheap-module-eval-source-map‘,
  plugins: [
    new webpack.DefinePlugin({
      ‘process.env‘: config.dev.env
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new FriendlyErrorsPlugin(),
  ]
})

function getEntry(globPath) {
  var entries = {},
    basename;

  glob.sync(globPath).forEach(function(entry) {

    basename = path.basename(entry, path.extname(entry));
    entries[basename] = entry;
  });
  return entries;
}

var pages = getEntry(‘src/pages/**/*.html‘);

for (var pathname in pages) {
  // 配置生成的html文件，定义路径等
  var conf = {
    filename: pathname + ‘.html‘,
    template: pages[pathname], // 模板路径
    inject: true, // js插入位置
    chunks: [pathname]
  };
  module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

webpack.prod.conf.js文件的配置

var path = require(‘path‘)
var utils = require(‘./utils‘)
var webpack = require(‘webpack‘)
var config = require(‘../config‘)
var merge = require(‘webpack-merge‘)
var baseWebpackConfig = require(‘./webpack.base.conf‘)
var HtmlWebpackPlugin = require(‘html-webpack-plugin‘)
var ExtractTextPlugin = require(‘extract-text-webpack-plugin‘)
var env = config.build.env

var plugins = [
  new webpack.DefinePlugin({
    ‘process.env‘: env
  }),
  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false
    }
  }),
  new webpack.optimize.OccurrenceOrderPlugin(),
  new ExtractTextPlugin(utils.assetsPath(‘css/[name].[contenthash].css‘)),
]

function getEntry(globPath) {
  var entries = {},
    basename;

  glob.sync(globPath).forEach(function(entry) {

    basename = path.basename(entry, path.extname(entry));
    entries[basename] = entry;
  });
  return entries;
}

var pages = getEntry(‘src/pages/**/*.html‘);

for (var pathname in pages) {
  var conf = {
    filename: process.env.NODE_ENV === ‘testing‘ ? pathname + ‘.html‘ : config.build[pathname],
    template: pages[pathname],
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    },
    chunks: [pathname]
  }
  plugins.push(new HtmlWebpackPlugin(conf));
}

var webpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true
    })
  },
  devtool: config.build.productionSourceMap ? ‘#source-map‘ : false,
  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath(‘js/[name].[chunkhash].js‘),
    chunkFilename: utils.assetsPath(‘js/[id].[chunkhash].js‘)
  },
  plugins: plugins
})

if (config.build.productionGzip) {
  var CompressionWebpackPlugin = require(‘compression-webpack-plugin‘)

  webpackConfig.plugins.push(newCompressionWebpackPlugin({asset:‘[path].gz[query]‘,algorithm:‘gzip‘,test:newRegExp(‘\\.(‘+
        config.build.productionGzipExtensions.join(‘|‘)+‘)$‘),threshold:10240,minRatio:0.8}))}if(config.build.bundleAnalyzerReport){varBundleAnalyzerPlugin=require(‘webpack-bundle-analyzer‘).BundleAnalyzerPlugin
  webpackConfig.plugins.push(newBundleAnalyzerPlugin())}module.exports = webpackConfig

好了，所有配置文件写完。

还有最后一步就是修改项目目录结构。

在src目录下新建一个page目录，然后建一个index目录用来放index.html、Index.vue、index_main.js三个文件。

如果有多个页面，就类似添加一个video目录存放三个文件，每个文件的书写方式。按照index文件书写方式一样。

index.html文件

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" href="http://cdn.bunny-tech.com/promotion/static/act-imags/icon.png" />
  <title>映兔视频</title>
</head>

<body>
  <div id="app"></div>
</body>

</html>

Index.vue文件

<template>
  <div class="warp">
    <p>index</p>
    <hello></hello>
  </div>
</template>
<script>
import main from ‘../../lib/main‘
import Hello from ‘../../components/Hello‘
import store from ‘../../lib/store‘

export default {
  name: ‘index‘,
  components: {
    ‘hello‘: Hello
  },
  data() {
    return {
      bannerHref: ‘‘,

    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      var rep = {
        bannerPosition: ‘hasActive‘
      }
      store.getinfo(rep,
        function(res) {
          if (res.errorCode == 0) {
            console.log(res.data);
          }
        })
    }
  }
}
</script>
<style scoped>
.warp {
  max-width: 750px;
  margin: 0 auto;
  background: #CCC;
}
</style>

index_main.js文件

import Vue from ‘vue‘
import App from ‘./Index‘
import Resource from ‘vue-resource‘

Vue.use(Resource);

new Vue({
  el: ‘#app‘,
  template: ‘<App/>‘,
  components: { App }
})

ok了，记得删除主目录下的index.html文件哦，因为那个已经被我们移到page目录下面了。以后就安心写业务代码吧。不需要管配置的问题了。上面文件里关于vue-resource的代码，在写demo的时候都可以去掉，那是关于vue异步请求数据的，这个例子用不到。如果喜欢下次写一点关于vue异步请求数注意事项。

时间： 2024-10-04 09:52:10

关于vue项目多页面的配置的相关文章

团队协作统一vue代码风格，vscode做vue项目时的一些配置

1. 安装Vetur 扩展 主要是用于让vscode能识别vue文件,对vue代码进行高丽处理,并且它内置了一些代码格式化的设置 2. 安装ESLint 如果你的项目已经开启了eslint规范, 再有多余的空格,或者空行,会有红色波浪线提示. 但是光有提示还不够,还希望在ctrl + s保存的时候自动帮我们处理这些小问题.其实那些js规范,大部分人错得多的地方无非就是个空格与空行的问题 文件 -> 首选项 -> 设置 将以下配置填入 worksapce settings { "edi

vue项目部署nginx，配置

#user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream;

Vue项目在pycharm中配置

pycharm配置并启动vue项目 第一步 用pycharm打开vue项目的根目录 第二步 安装vue.js插件来高亮 .vue 文件代码(见插图) 第三步 第四步 配置npm启动服务启动vue项目(见插图) 第五步 原文地址:https://www.cnblogs.com/baohanblog/p/12304873.html

Vue项目中使用webpack配置了别名，引入的时候报错

chainWebpack(config) { config.resolve.alias .set('@', resolve('src')) .set('assets', resolve('src/assets')) .set('components', resolve('src/components')) }, 这是vue.config.js里的配置 使用的时候,要在别名前面加上~,这样就会告知加载器这是一个模块,而不是绝对路径 记住,在script部分或者js里引入的时候,不需要加 ~,直接用

webpack构建vue项目（再谈配置）

webpack配置起来确实麻烦,这不,之前用刚配好了vue1+的版本,结果在(部分)安卓机上测试,发现存在开启热加载(dev-server)的情况下不能识别vue语法的问题,试了很多方法,都没能很好的解决,最后索性将vue升级到2+,竟然就能识别了,好吧! 1.先分享一下webpack配置vue2+的一些不同(本人亲测): (1)dependencies中的vue默认安装2+,直接运行,会报如下错:[Vue warn]: Failed to mount component: template o

详解Vue前端生产环境发布配置实战篇

前言 首先这篇文章是写给Vue新手的,老司机基本不用看了. 当我们刚接触vue的时候,特别是对于第一次用前端框架的同学来说,心情可以说是比较激动的,框架带来的种种新体验,是以前jQuery无法给你的兴奋和满足感.但是在体验了几个demo的新鲜感之后,我们就要考虑如何把框架结合到我们实际的开发中如何应用的问题了. 下面我主要总结三个和生产发布相关的问题:资源文件发布文件夹配置,图片文件的引用,以及后台接口调试方法. 一,资源文件发布配置 一般项目都是用vue-cli脚手架搭建项目,然后编写自己的代

Vue项目环境的搭建

Vue项目环境搭建 node 是由c++编写的专门用来运行javascript语言的. npm(cnpm)~~pip:npm是一个终端应用商城,就像python的pip一样,只不过他服务器也在国外,所以可以换国内源cnpm vue~~django:vue是用来搭建vue前端项目的. js是前端的弱语言的脚本编程语言,而node则是一个后端语言 1.安装node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2.换源安装cnpm,后续下载只需要将npm换成cnpm

VUE项目多环境配置.md

目录 一.了解webpack.DefinePlugin 二.项目中如何配置多环境 web项目开发,通常需要有开发环境.测试环境和生产环境,用于配置不同的环境变更,如调用本地接口.测试接口和生产接口,VUE项目是前后端完全分离的框架,像是web界的C/S构架,在做VUE前端开发时,就需要用开发环境甚至于mock环境,等项目上线时,则需要使用生产的环境变量进行打包部署. 一.了解webpack.DefinePlugin webpack是静态模块打包器,可以将vue项目中所有文件打包成一个或多个jsb

rem的在vue项目中使用配置，，浏览器的兼容性之Mate标签

在vue中配置rem 位置:在APP.vue的script中,在export default之外 (()=>{ let winW = document.documentElement.clientWidth, desW = 1440, htmlFont = winW / desW * 100; window.htmlFont = htmlFont; document.documentElement.style.fontSize = htmlFont + 'px'; })() 浏览器的兼容性之Ma