介绍
这篇文章将为大家详细讲解有关怎么使用vue-cli3新建一个项目并写好基本配置,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
1。使用vue-cli3新建项目:https://cli.vuejs.org/zh/guide/creating-a-project.html
注意,我这里用gitbash不好选择选项,我就用了基本的cmd(系统命令提示符):上下箭头和空格键可控制选项。
<强>详细步骤:
(1) vue创建初始化:这里我选择了自定义配置
(2)使用上下箭头和空格进行选择,我这里选择了这四个,之所以没用css预处理程序<代码> 是因为我的项目中要用<代码> postcss-cssnext>
(3)后面的
使用组件类样式的语法吗?是否使用类风格的组件语法?
使用巴别塔和自动侦测polyfills打印稿吗?是否使用巴贝尔做转义?
为路由器使用历史模式吗?是否使用路由历史的模式?
,你喜欢把配置巴别塔,PostCSS, ESLint,等等?把巴贝尔、postcss eslint这些配置文件放哪?
保存为预设未来的项目吗?(Y/n)是否记录一下以便下次继续使用这套配置?
2。改项目端口(一个人需求):在根目录新建vue.config。js (vue-cli3其他配置相关也写在这里)
module.exports =, {
,devServer: {
,,端口:8100,,//,端口号
,}
} 3。根据环境设置相关变量(比如请求地址,打包输出路径等),并打包不同环境代码
(1)在根目录新建appconf。json,保存不同环境的对应变量配置
{
,“dev": {
,“serverUrl":“http://localhost: 57156/?
},
,“build": {
,“serverUrl":“http://build.com/"
,“outputDir":“. ./. ./dist/build",,,,,,,
,“productId":“111”;
},
,“alpha": {
,“serverUrl":“http://build-test.com/"
,“outputDir":“. ./. ./dist/alpha"
,“productId":“222”;
,}
} (2) src下新建常见的文件夹,下面新建configByEnv。js,根据环境设置对应变量值
var path =,需要(& # 39;path & # 39;)
var appconf =,要求(& # 39;. ./. ./appconf.json& # 39;)
var serverurl
var productId =, & # 39; & # 39;
switch (process.env.NODE_ENV), {
,case & # 39;生产# 39;:
serverurl 才能=appconf.build.serverUrl
productId 才能=appconf.build.productId
,打破
,case & # 39;发展# 39;:
serverurl 才能=appconf.dev.serverUrl
,打破
,case & # 39;α# 39;:
serverurl 才能=appconf.alpha.serverUrl
productId 才能=appconf.alpha.productId
,打破
}//,配置,build 文件输出路径,,可以使用绝对路径或相对路径
var outputDir
var reg =,/^ \。(\) ? \/?/if (reg.test (appconf.build.outputDir)), {
,if (process.env.NODE_ENV ==, & # 39;α# 39;)
时间=outputDir 才能;path.resolve (__dirname, appconf.alpha.outputDir),//,相对路径
其他的,
时间=outputDir 才能;path.resolve (__dirname, appconf.build.outputDir),//,相对路径
},{else
,if (process.env.NODE_ENV ==, & # 39;α# 39;)
outputDir 才能=appconf.alpha.outputDir
其他的,
时间=outputDir 才能;appconf.build.outputDir //,绝对路径
}
var conf =, {
,outputDir: outputDir,
,serverUrl: serverUrl,
,env: process.env.NODE_ENV,
,productId: productId
}
module.exports =,参看 (3)在需要用以上变量的地方引入即可,如
。js中:<代码> var {outputDir}=要求(& # 39;。/src/共同/configByEnv.js& # 39;);
。ts中:<代码>从& # 39;进口{serverUrl} @/共同/configByEnv.js& # 39;;
注意:ts这样引入会报错,需要将tsconfig.json中添加,“allowJs":真的,
- - - - - - - - - -上面针对某些变量根据不同环境设置了不同值,那么打包时只要更改环境,打包后则会取到不同环境对应的特定值- - - - - -
