Vue.js-Basic Configuration

In this chapter, we mainly talk about the problems and solutions of Vue based on VUE-CLI Scaffolding project.

Homepage, Vue long page of the project, such as the production of the official website, how to configure the page?

Here's how I configure it.

First: Find the \build\webpack.base.conf.js file, in the code to find where the module.exports appears, you can see entry

The configuration is as follows:

App: './src/main.js './src/js/news.js './src/js/strategy.js'./src/js/material.js '

Step Two: Locate the \build\webpack.dev.conf.js file, locate the Module.exports in the code, and you can see the plugins

The configuration is as follows:

　　
Source code already available
Newhtmlwebpackplugin ({filename:' Index.html ', Template:' Index.html ', inject:true, chunks: [' App ']    }),
The following is a configuration add, which is added according to the Sub-pageNewhtmlwebpackplugin ({filename:' News.html ', Template:' News.html ', inject:true, chunks: [' News ']    }),    Newhtmlwebpackplugin ({filename:' Strategy.html ', Template:' Strategy.html ', inject:true, chunks: [' Strategy ']    }),    Newhtmlwebpackplugin ({filename:' Material.html ', Template:' Material.html ', inject:true, chunks: [' Material ']    }),

Step three: Find the/build/webpack.prod.conf.js file and find the place where Htmlwebpackplugin is located

The configuration is as follows:

//source code already has
NewHtmlwebpackplugin ({Filename:process.env.NODE_ENV= = = ' testing '? ' Index.html ': 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 CommonschunkpluginChunkssortmode: ' Dependency ', chunks: [' Manifest ', ' Vendor ', ' app ']    }),
The following files are configured for themselvesNewHtmlwebpackplugin ({filename:config.build.news, Template:' News.html ', inject:true, Minify: {removecomments:true, Collapsewhitespace:true, Removeattributequotes:true}, Chunkssortmode:' Dependency ', chunks: [' Manifest ', ' Vendor ', ' News ']    }),    NewHtmlwebpackplugin ({filename:config.build.strategy, Template:' Strategy.html ', inject:true, Minify: {removecomments:true, Collapsewhitespace:true, Removeattributequotes:true}, Chunkssortmode:' Dependency ', chunks: [' Manifest ', ' Vendor ', ' strategy ']    }),    NewHtmlwebpackplugin ({filename:config.build.material, Template:' Material.html ', inject:true, Minify: {removecomments:true, Collapsewhitespace:true, Removeattributequotes:true}, Chunkssortmode:' Dependency ', chunks: [' Manifest ', ' Vendor ', ' material ']    }),

Fourth step: Locate the \config\index.js file and find the build

The configuration is as follows:

    Index:path.resolve (__dirname, ' ... /dist/index.html '),  //source file already    has '. /dist/news.html '),//The following are profiles     '. /dist/strategy.html '),    '. /dist/material.html '),

Finally, you need to modify the Xx.js,xx.vue file for each page, for example, news.

News.js

Import vue from ' Vue'./news.vue 'false/**/new  Vue ({  ' #news ',  + = h (News)})

News.vue

<template>  <div id= "News" >    {{msg}}  </div></template><script>  default  {  ' news ',  data () {    return  {      ' I am News '  }} </script>

News.html

<!DOCTYPE HTML><HTML>  <Head>    <MetaCharSet= "Utf-8">    <Metaname= "Viewport"content= "width=device-width,initial-scale=1.0">    <title>News</title>  </Head>  <Body>    <DivID= "News"></Div>    <!--built files would be auto injected -  </Body></HTML>

Finally, the main page App.vue

<Template>  <DivID= "App">    <ahref= "news.html">News</a><BR>    <ahref= "material.html">Material</a><BR>    <ahref= "strategy.html">Strategy</a><BR>  </Div></Template>

Then restart NPM Run Dev

You can see as the interface

This time the Vue multi-page configuration is done.

Vue.js-Basic Configuration