最近将公司项目升级到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('path')
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
lintOnSave: false,
chainWebpack: (config) => {
// 配置页面环境变量
config.plugin('define').tap((args) => {
args[0]['process.env']['CEMSYS_API'] = `"${process.env.CEMSYS_API}"`
return args
})
// 配置静态资源图片
config.module.rules.delete('images')
// 清除svg默认的处理方式
config.module.rules.delete('svg')
},
configureWebpack: {
devtool: 'source-map',
externals: {
'AMap': 'AMap',
'AMapUI': 'AMapUI',
'EZUIPlayer': 'EZUIPlayer'
},
resolve: {
extensions: ['.js', '.vue', '.json', '.css'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src')
}
},
performance: {
hints: false
},
plugins: [
// new BundleAnalyzerPlugin()
],
module: {
rules: [
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: [resolve('src/icons')],
options: {
symbolId: 'icon-[name]'
}
},
{
test: /\.(png|jpe?g|gif|webp|svg)(\?.*)?$/,
exclude: [resolve('src/icons')],
use: [
{
loader: 'url-loader',
options: {
limit: 4096,
fallback: {
loader: 'file-loader',
options: {
name: 'img/[name].[hash:8].[ext]'
}
}
}
}
]
}
]
}
},
devServer: {
proxy: {
'/sjgzxt': {
target: 'http://www.100Link.net',
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
- 使用vue-cli创建新的项目
- 删除新项目中
src
下的内容 - 将原有项目
src
中的源码拷贝到新项目的src
中 - 将原有项目的
index.html
及favicon.ico
拷贝到新项目的public
中 - 将原有的*
static
文件夹也拷贝到新项目的public
中 - 修改package.json、.babelrc等文件,保持和原有项目一致即可 ps: 旧package.json的开发环境依赖和新的不一样,可以不复制
- request.js里面的有用到之前的变量需要修改一下
六、需解决的问题
1. 升级后可能css样式会紊乱,可能是因为写在全局里面了
vue框架中每个vue页面的style可以加上scoped属性,如下所示,代表仅对当前页面生效,否则在运行项目时页面样式会出现杂乱
<style scoped lang="scss">
不重名也可以避免样式错乱