vuecli3

最近将公司项目升级到vue-cli3.0，遇到一些问题，记录一下

一、安装

1. node环境需要8.9及更高版本

2. 关于旧版本 

     Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

    但是我本地没有卸载也可以用，如果卸载了要用到vue-cli2的话需要桥接一下

3. 安装vue-cli3.0

npm install -g @vue/cli
# OR
yarn global add @vue/cli

二、搭建项目

1. vue create vue-test

空格选择需要的特性

选择scss 和 选择 eslint编码规范，这里我选择prettier

选择何时进行代码检测，此处选择在保存时进行检测

选择 Babel、PostCSS、ESLint等配置文件存放位置，此处选择单独保存在各自的配置文件中

保存这个配置

2. 创建完成后

// 进入到vue-test项目
cd vue-test
// - 启动服务
npm run serve
// - 打包编译
npm run build

3. 目录
三、配置vue.config.js
vue.config.js是一个可配置文件，用来写一些配置，如代理、打包、地址等配置

/* module.exports = {plugins: {autoprefixer: {}}
}; */
const path = require(&＃39;path&＃39;)
// const BundleAnalyzerPlugin = require(&＃39;webpack-bundle-analyzer&＃39;).BundleAnalyzerPluginfunction resolve(dir) {return path.join(__dirname, dir)
}module.exports = {lintOnSave: false,chainWebpack: (config) => {// 配置页面环境变量config.plugin(&＃39;define&＃39;).tap((args) => {args[0][&＃39;process.env&＃39;][&＃39;CEMSYS_API&＃39;] = `"${process.env.CEMSYS_API}"`return args})// 配置静态资源图片config.module.rules.delete(&＃39;images&＃39;)// 清除svg默认的处理方式config.module.rules.delete(&＃39;svg&＃39;)},configureWebpack: {devtool: &＃39;source-map&＃39;,externals: {&＃39;AMap&＃39;: &＃39;AMap&＃39;,&＃39;AMapUI&＃39;: &＃39;AMapUI&＃39;,&＃39;EZUIPlayer&＃39;: &＃39;EZUIPlayer&＃39;},resolve: {extensions: [&＃39;.js&＃39;, &＃39;.vue&＃39;, &＃39;.json&＃39;, &＃39;.css&＃39;],alias: {&＃39;vue$&＃39;: &＃39;vue/dist/vue.esm.js&＃39;,&＃39;@&＃39;: resolve(&＃39;src&＃39;)}},performance: {hints: false},plugins: [// new BundleAnalyzerPlugin()],module: {rules: [{test: /\.svg$/,loader: &＃39;svg-sprite-loader&＃39;,include: [resolve(&＃39;src/icons&＃39;)],options: {symbolId: &＃39;icon-[name]&＃39;}},{test: /\.(png|jpe?g|gif|webp|svg)(\?.*)?$/,exclude: [resolve(&＃39;src/icons&＃39;)],use: [{loader: &＃39;url-loader&＃39;,options: {limit: 4096,fallback: {loader: &＃39;file-loader&＃39;,options: {name: &＃39;img/[name].[hash:8].[ext]&＃39;}}}}]}]}},devServer: {proxy: {&＃39;/sjgzxt&＃39;: {target: &＃39;http://www.100Link.net&＃39;,changeOrigin: true,ws: true,secure: false}}}
}

四、环境变量

在.env里面写一些需要的变量

为一个特定模式准备的环境文件(如 .env.production)将会比一般的环境文件 (如 .env) 拥有更高的优先级，此外，Vue CLI启动时已经存在的环境变量拥有最高优先级，并不会被 .env 文件覆写

CEMSYS_API=https://www.100link.net/cas
VUE_APP_BASE_API=/sjgzxt

五、将已有项目升级到vue-cli3.0

1. 使用vue-cli创建新的项目
2. 删除新项目中src下的内容
3. 将原有项目src中的源码拷贝到新项目的src中
4. 将原有项目的index.html及favicon.ico拷贝到新项目的public中
5. 将原有的*static文件夹也拷贝到新项目的public中
6. 修改package.json、.babelrc等文件，保持和原有项目一致即可 ps: 旧package.json的开发环境依赖和新的不一样，可以不复制
7. request.js里面的有用到之前的变量需要修改一下

六、需解决的问题

1. 升级后可能css样式会紊乱，可能是因为写在全局里面了

vue框架中每个vue页面的style可以加上scoped属性，如下所示，代表仅对当前页面生效，否则在运行项目时页面样式会出现杂乱

不重名也可以避免样式错乱