脚本宝典收集整理的这篇文章主要介绍了

vue-cli3多环境多入口,分别打包

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>一、安装<br />1.<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> CLI 3需要 <a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>Js ≥ 8.9 ,查看<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>版本升级,升级一下<br />2.查看版本vue -V,安装vue-cli3,npm install -g @vue/cli<br />二、使用<br />1.vue create projectname 搭建新项目:vue create vue-cli3<br /><span class="img-wrap"><img data-src="/img/bVbrsvC" src="/img/bVbrsvC" alt="clipboard.png" title="clipboard.png" style="cursor: pointer; display: inline;"></span><br />选择默认default(基本的 Babel + ESLint)配置,还是 Manually手动配置,是由上下键控制<br />vue-cli3.0会在你创建后会有一个保存当前配置的功能,这里之前没有所以只有两个选项<br />我们一般选择手动</p> <p><span class="img-wrap"><img data-src="/img/bVbrsvJ" src="/img/bVbrsvJ" alt="clipboard.png" title="clipboard.png" style="cursor: pointer; display: inline;"></span><br />一般不要选择eslint 检验你的代码,否则你可能会遇到很多麻烦<br />一般采用 vue-router(路由必备),vuex(全家桶的状态管理器),sass(css扩展语言),<a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a>(使项目可用<a href="http://www.js-code.com/tag/es6" title="浏览关于“es6”的文章" target="_blank" class="tag_link">es6</a>)<br />(你的项目决定你用什么)空格多选<br />TypeScript<br />PWA<br /><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>-router<br /><a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>x<br /><a href="http://www.js-code.com/tag/css" title="浏览关于“CSS”的文章" target="_blank" class="tag_link">CSS</a>预处理<br />eslint prettier<br />自动化测试单元测试 、e2e</p> <p><span class="img-wrap"><img data-src="/img/bVbrsvS" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span><br />之后会问你是否把这次设置保存,我选择N</p> <p><span class="img-wrap"><img data-src="/img/bVbrsv0" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span><br />按照命令cd vue-cli3、npm run serve,就搭建成功了。</p> <p>三、项目目录讲解<br />dist 目录为 运行 npm run build 构建后的项目<br />main.js 为入口文件<br />vue.config.js 为项目配置文件,vue.config.js是需要自己建,<a href="https://cli.vuejs.org/zh/config/#filenamehashing" rel="nofollow noreferrer" target="_blank">详细配置可以看官方文档</a> </p> <p><span class="img-wrap"><img data-src="/img/bVbrsv4" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span><br />接下来,挪挪文件,新建一个ui文件夹及相关文件,我把自己的项目目录建成这样</p> <p><span class="img-wrap"><img data-src="/img/bVbrswc" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>这里重要代码有index文件夹下 index/App.vue</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div id=&quot;nav&quot;> <router-link to=&quot;/&quot;>Home</router-link><br /> <router-link to=&quot;/about&quot;>About</router-link><br /> </p> <div> <a href=&quot;ui.html&quot;>跳转新的页面</a> </div> <p> <router-view ></router-view> </div> <p></template></p> <p><script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { data () { return {} }, mounted () { console.log(<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>) console.log(<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$router) } }</p> <p></script></p> <style> #nav { background: cadetblue; text-align: center }</p> <p> #nav>a { display: inline; padding: 5px 10px; }</p> </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"nav"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">"/"</span>&gt;</span>Home<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">"/about"</span>&gt;</span>About<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"ui.html"</span>&gt;</span>跳转新的页面<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span> /&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> { data () { <span class="hljs-keyword">return</span> {} }, mounted () { <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>) <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.$router) } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"> <span class="hljs-selector-id">#nav</span> { <span class="hljs-attribute">background</span>: cadetblue; <span class="hljs-attribute">text-align</span>: center } <span class="hljs-selector-id">#nav</span>&gt;<span class="hljs-selector-tag">a</span> { <span class="hljs-attribute">display</span>: inline; <span class="hljs-attribute">padding</span>: <span class="hljs-number">5px</span> <span class="hljs-number">10px</span>; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> </code></pre> <p>对应的主文件 index/main.js</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' Vue.config.productionTip = false new Vue({ router, store, render: h => h(App)<br /> }).$mount('#app')<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> <span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">'./App.vue'</span> <span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">'./router'</span> <span class="hljs-keyword">import</span> store <span class="hljs-keyword">from</span> <span class="hljs-string">'./store'</span> Vue.config.productionTip = <span class="hljs-literal">false</span> <span class="hljs-keyword">new</span> Vue({ router, store, render: <span class="hljs-function"><span class="hljs-params">h</span> =&gt;</span> h(App) }).$mount(<span class="hljs-string">'#app'</span>) </code></pre> <p>对应的 index/router.js</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import Vue from 'vue' import Router from 'vue-router' import Home from './Home.vue' Vue.use(Router) export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: &quot;about&quot; */ './About.vue')<br /> }<br /> ]<br /> })<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> <span class="hljs-keyword">import</span> Router <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-router'</span> <span class="hljs-keyword">import</span> Home <span class="hljs-keyword">from</span> <span class="hljs-string">'./Home.vue'</span> Vue.use(Router) <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">new</span> Router({ mode: <span class="hljs-string">'history'</span>, base: process.env.BASE_URL, routes: [ { path: <span class="hljs-string">'/'</span>, name: <span class="hljs-string">'home'</span>, component: Home }, { path: <span class="hljs-string">'/about'</span>, name: <span class="hljs-string">'about'</span>, <span class="hljs-comment">// route level code-splitting</span> <span class="hljs-comment">// this generates a separate chunk (about.[hash].js) for this route</span> <span class="hljs-comment">// which is lazy-loaded when the route is visited.</span> component: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="hljs-keyword">import</span>(<span class="hljs-comment">/* webpackChunkName: "about" */</span> <span class="hljs-string">'./About.vue'</span>) } ] }) </code></pre> <p>另一个ui文件下的也类似,ui/ui.vue</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div id=&quot;nav&quot;> <router-link to=&quot;/&quot;>page1</router-link><br /> <router-link to=&quot;/page2&quot;>page2</router-link><br /> </p> <div> <a href=&quot;index.html&quot;>跳转新的页面</a> </div> <p> <router-view ></router-view> </div> <p></template></p> <style> #nav { background: violet; text-align: center }</p> <p> #nav>a { display: inline; padding: 5px 10px; }</p> </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"nav"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">"/"</span>&gt;</span>page1<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">"/page2"</span>&gt;</span>page2<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"index.html"</span>&gt;</span>跳转新的页面<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span> /&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"> <span class="hljs-selector-id">#nav</span> { <span class="hljs-attribute">background</span>: vio<a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a>; <span class="hljs-attribute">text-align</span>: center } <span class="hljs-selector-id">#nav</span>&gt;<span class="hljs-selector-tag">a</span> { <span class="hljs-attribute">display</span>: inline; <span class="hljs-attribute">padding</span>: <span class="hljs-number">5px</span> <span class="hljs-number">10px</span>; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> </code></pre> <p>对应的 ui/main.js</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import Vue from 'vue' import Ui from './ui.vue' import router from './router' import store from './store' Vue.config.productionTip = false new Vue({ router, store, render: h => h(Ui)<br /> }).$mount('#app')<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> <span class="hljs-keyword">import</span> Ui <span class="hljs-keyword">from</span> <span class="hljs-string">'./ui.vue'</span> <span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">'./router'</span> <span class="hljs-keyword">import</span> store <span class="hljs-keyword">from</span> <span class="hljs-string">'./store'</span> Vue.config.productionTip = <span class="hljs-literal">false</span> <span class="hljs-keyword">new</span> Vue({ router, store, render: <span class="hljs-function"><span class="hljs-params">h</span> =&gt;</span> h(Ui) }).$mount(<span class="hljs-string">'#app'</span>) </code></pre> <p>对应的 ui/router.js</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import Vue from 'vue' import Router from 'vue-router' import Page from './page1.vue' Vue.use(Router) export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', name: 'page', component: Page }, { path: '/page2', name: 'page2', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: &quot;about&quot; */ './page2.vue')<br /> }<br /> ]<br /> })<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> <span class="hljs-keyword">import</span> Router <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-router'</span> <span class="hljs-keyword">import</span> Page <span class="hljs-keyword">from</span> <span class="hljs-string">'./page1.vue'</span> Vue.use(Router) <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">new</span> Router({ mode: <span class="hljs-string">'history'</span>, base: process.env.BASE_URL, routes: [ { path: <span class="hljs-string">'/'</span>, name: <span class="hljs-string">'page'</span>, component: Page }, { path: <span class="hljs-string">'/page2'</span>, name: <span class="hljs-string">'page2'</span>, <span class="hljs-comment">// route level code-splitting</span> <span class="hljs-comment">// this generates a separate chunk (about.[hash].js) for this route</span> <span class="hljs-comment">// which is lazy-loaded when the route is visited.</span> component: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="hljs-keyword">import</span>(<span class="hljs-comment">/* webpackChunkName: "about" */</span> <span class="hljs-string">'./page2.vue'</span>) } ] }) </code></pre> <p>对应的vue.config.js的代码</p> <p><span class="img-wrap"><img data-src="/img/bVbrsxc" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>运行npm run serve 之后可以通过a标签跳转不同的页面</p> <p><span class="img-wrap"><img data-src="/img/bVbrsxf" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p><span class="img-wrap"><img data-src="/img/bVbrsxg" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>四、分别打包<br />想法是根据不同指令传参,打包不同文件</p> <p>![图片上传中...]</p> <p>修改vue.config.js代码<br />注意:publicPath: ‘./’, 根据自己路径配置,否则打包后的js和css引用的路径不对</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="let objectProject = { index: { entry: 'src/views/index/main.js', // page 的入口 template: 'src/public/index.html', // 模板来源 filename: 'index.html', // 在 dist/index.html 的输出 // 在这个页面中包含的块,默认情况下会包含,提取出来的通用 chunk 和 vendor chunk。 chunks: ['chunk-vendors', 'chunk-common', 'index'] }, ui: { entry: 'src/views/ui/main.js', template: 'src/public/ui.html', filename: 'ui.html', chunks: ['chunk-vendors', 'chunk-common', 'ui'] } } let page = {} let projectname = process.argv[3] // 获取build后面的参数确定执行哪个文件 if (process.env.NODE_ENV == 'development') { page = objectProject//判断开发环境不用 } else { //假如命令npm run build-index, //就会得到projectname=index page[projectname] = objectProject[projectname] // { // index: { // entry: 'src/views/index/main.js', // template: 'public/index.html', // filename: 'index.html', // chunks: ['chunk-vendors', 'chunk-common', 'index'] // } // } } module.exports = { publicPath: '/', // 官方要求修改路径在这里做更改,默认是根目录下,可以自行配置 outputDir: 'dist'+projectname, //标识是打包哪个文件 pages: page, productionSourceMap: false, devServer: { open: true, // 项目构建成功之后,自动弹出页面 host: 'localhost', // 主机名,也可以127.0.0.0 || 做真机测试时候0.0.0.0 port: 8081, // 端口号,默认8080 https: false, // 协议 hotOnly: false // 没啥效果,热模块,webpack已经做好了 } } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">let</span> objectProject = { index: { entry: <span class="hljs-string">'src/views/index/main.js'</span>, <span class="hljs-comment">// page 的入口</span> template: <span class="hljs-string">'src/public/index.html'</span>, <span class="hljs-comment">// 模板来源</span> filename: <span class="hljs-string">'index.html'</span>, <span class="hljs-comment">// 在 dist/index.html 的输出</span> <span class="hljs-comment">// 在这个页面中包含的块,默认情况下会包含,提取出来的通用 chunk 和 vendor chunk。</span> chunks: [<span class="hljs-string">'chunk-vendors'</span>, <span class="hljs-string">'chunk-common'</span>, <span class="hljs-string">'index'</span>] }, ui: { entry: <span class="hljs-string">'src/views/ui/main.js'</span>, template: <span class="hljs-string">'src/public/ui.html'</span>, filename: <span class="hljs-string">'ui.html'</span>, chunks: [<span class="hljs-string">'chunk-vendors'</span>, <span class="hljs-string">'chunk-common'</span>, <span class="hljs-string">'ui'</span>] } } <span class="hljs-keyword">let</span> page = {} <span class="hljs-keyword">let</span> projectname = process.argv[<span class="hljs-number">3</span>] <span class="hljs-comment">// 获取build后面的参数确定执行哪个文件</span> <span class="hljs-keyword">if</span> (process.env.NODE_ENV == <span class="hljs-string">'development'</span>) { page = objectProject<span class="hljs-comment">//判断开发环境不用</span> } <span class="hljs-keyword">else</span> { <span class="hljs-comment">//假如命令npm run build-index,</span> <span class="hljs-comment">//就会得到projectname=index</span> page[projectname] = objectProject[projectname] <span class="hljs-comment">// {</span> <span class="hljs-comment">// index: {</span> <span class="hljs-comment">// entry: 'src/views/index/main.js',</span> <span class="hljs-comment">// template: 'public/index.html', </span> <span class="hljs-comment">// filename: 'index.html',</span> <span class="hljs-comment">// chunks: ['chunk-vendors', 'chunk-common', 'index']</span> <span class="hljs-comment">// }</span> <span class="hljs-comment">// }</span> } <span class="hljs-built_in">module</span>.exports = { publicPath: <span class="hljs-string">'/'</span>, <span class="hljs-comment">// 官方要求修改路径在这里做更改,默认是根目录下,可以自行配置</span> outputDir: <span class="hljs-string">'dist'</span>+projectname, <span class="hljs-comment">//标识是打包哪个文件</span> pages: page, productionSource<a href="http://www.js-code.com/tag/map" title="浏览关于“Map”的文章" target="_blank" class="tag_link">Map</a>: <span class="hljs-literal">false</span>, devServer: { open: <span class="hljs-literal">true</span>, <span class="hljs-comment">// 项目构建成功之后,自动弹出页面</span> host: <span class="hljs-string">'localhost'</span>, <span class="hljs-comment">// 主机名,也可以127.0.0.0 || 做真机测试时候0.0.0.0</span> port: <span class="hljs-number">8081</span>, <span class="hljs-comment">// 端口号,默认8080</span> https: <span class="hljs-literal">false</span>, <span class="hljs-comment">// 协议</span> hotOnly: <span class="hljs-literal">false</span> <span class="hljs-comment">// 没啥效果,热模块,webpack已经做好了</span> } } </code></pre> <p>打包之后效果,这样就简单完成了一个小demo</p> <p><span class="img-wrap"><img data-src="/img/bVbrszw" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>demo源码:<a href="https://github.com/chenshuang0630/vue-cli3/tree/master" rel="nofollow noreferrer" target="_blank">https://github.com/chenshuang...</a></p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

vue-cli3多环境多入口,分别打包

全部内容,希望文章能够帮你解决

vue-cli3多环境多入口,分别打包

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过