web前端：vuecli3的项目搭建，包含vue.config.js常用配置

作者:smile_or 更新于： 2020-03-03 11:01:41

　　插件(Plug-in,又称addin、add-in、addon或add-on,又译外挂)是一种遵循一定规范的应用程序接口编写出来的程序。其只能运行在程序规定的系统平台下(可能同时支持多个平台)，而不能脱离指定的平台单独运行。

　　1、卸载旧版本

　　npmuninstallvue-cli-g或者yarnglobalremovevue-cli

　　2、安装cli3脚手架

　　npminstall-g@vue/cli或者yarnglobaladd@vue/cli

　　注意：

　　要求node版本>=8.9

　　vue查看版本号------vue-V

　　node查看版本号-----node-v

　　3、安装支持运行独立的.vue文件

　　需安装npminstall-g@vue/cli-service-gloabal

　　运行文件vueserve<文件名>

　　4、新建项目

　　vuecreate<项目名字>//不支持驼峰

　　也可使用图形化界面搭建vueui

　　5、安装插件

　　vueadd<插件名>

　　6、cli常用配置（vue.config.js）

　　constpath=require('path');

　　constresolve=(dir)=>path.join(__dirname,dir);

　　module.exports={

　　publicPath:'./',//打包路径，使用相对路径生成的dist文件夹下的index可以打开

　　//输出文件目录

　　outputDir:'dist',

　　//取消生成map文件

　　productionSourceMap:false,

　　//webpack-dev-server相关配置

　　devServer:{

　　open:true,

　　host:'0.0.0.0',

　　port:8080,

　　httPS:false,

　　hotOnly:false,

　　proxy:null,//设置代理

　　before:app=>{}

　　},

　　chainWebpack:config=>{

　　config.resolve.alias

　　.set('@',resolve('src'))

　　.set('common',resolve('src/common'))

　　.set('utils',resolve('src/utils'))

　　},

　　//第三方插件配置

　　pluginOptions:{

　　//1)vue-cli3使用less全局变量

　　//需安装vueaddstyle-resources-loader

　　'style-resources-loader':{

　　preProcessor:'less',

　　patterns:[

　　path.resolve(__dirname,'./src/common/less/index.less'),

　　//这个是加上自己的路径，

　　]

　　}

　　}

　　}

　　插件的定位是开发实现原纯净系统平台、应用软件平台不具备的功能的程序，其只能运行在程序规定的系统平台下(可能同时支持多个平台)，而不能脱离指定的平台单独运行。因为插件需要调用原纯净系统提供的函数库或者数据。