Vue2.0项目工程升级3.0
建议读者先通过通过官网先了解一下链接: Vue CLI3.0下面就简单分享一下我的升级过程因为我构建项目都是基于3.0的,所以对于2.0的用户可以先升级一下脚手架工具已经装了2.0的话就需要先卸载npm uninstall vue-cli -g或yarn global remove vue-cli安装新版本脚手架npm install -g @vue/cli或yarn global add @vu
·
建议读者先通过通过官网先了解一下链接: Vue CLI3.0
下面就简单分享一下我的升级过程因为我构建项目都是基于3.0的,所以对于2.0的用户可以先升级一下脚手架工具
已经装了2.0的话就需要先卸载
npm uninstall vue-cli -g 或 yarn global remove vue-cli
安装新版本脚手架
npm install -g @vue/cli 或 yarn global add @vue/cli
然后创建一个新的项目工程,如果没有创建过3.0项目工程建议先阅读一下这块文章 vue-cli3快速创建项目
创建完成后的初始化项目工程目录
对比新旧项目升级目录
我们可以看到3.0 工程相当于 2.0 少了 builb config 文件目录,换成了vue.config.js替代配置,如果没有vue.config.js 新建一个即可。
升级步骤
1、 删除原vue-cli并安装vue-cli3.0
2、删除新项目中src下的内容,把原项目中src目录覆盖到新项目中
3、把router从目录文件夹改为文件,src/router/index.js提高一层变成src/router.js
4、 我的项目中src已经分为了views和components所以无需修改,如果不是这个结构需要自己区分下
5、将原项目的index.html及favicon.ico覆盖到新项目的public中
6、 将原项目的static文件夹拷贝到新项目的public中
7、 修改package.json文件,保持和原有项目一致即可
8、 创建并配置vue.config.js文件
根目录新增vue.config.js配置
const path = require("path");
//HardSourceWebpackPlugin是webpack的插件,为模块提供中间缓存步骤。为了查看结果,您需要使用此插件运行webpack两次:第一次构建将花费正常的时间。第二次构建将显着加快(大概提升90%的构建速度)。
//安装 npm install --save-dev hard-source-webpack-plugin
const HardSourceWebpackPlugin = require("hard-source-webpack-plugin");
//DllPlugin插件能够快速打包,能把第三方依赖的文件能提前进行预编译打包到一个文件里面去。
//安装 npm install --save-dev autodll-webpack-plugin
const AutoDllPlugin = require("autodll-webpack-plugin");
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
//assetsDir: "web",
lintOnSave: false,
publicPath: process.env.VUE_APP_PAGE_CONTEXT,
devServer: {
host: "127.0.0.1",
port: 9111,
overlay: {
warning: false,
errors: false
},
//接口代理
proxy: {
}
},
configureWebpack: config => {
Object.assign(config, {
resolve: {
extensions: ['.js', '.vue', '.json'] // 可以省略后缀名
}
});
Object.assign(config.resolve.alias, {
"@utils": resolve("src/utils"),
"@libs": resolve("src/libs"),
"@api": resolve("src/api"),
"@components": resolve("src/components"),
"@assets": resolve("src/assets"),
"@css": resolve("src/assets/css"),
"@images": resolve("src/assets/images"),
"@views": resolve("src/views"),
"@mixins": resolve("src/mixins")
});
if (process.env.NODE_ENV !== "production") {
config.plugins.push(
new HardSourceWebpackPlugin(),
new AutoDllPlugin({
inject: true,
debug: true,
filename: "[name]_[hash].js",
path: "./dll" + Date.parse(new Date()),
entry: {
vendor_vue: ["vue", "vuex", "vue-router"],
vendor_ui: ["vue-awesome-swiper"],
vendor_tools: ["axios", "core-js"]
}
})
);
}
},
chainWebpack: config => {
config.plugin("html").tap(args => {
args[0].title = process.env.VUE_APP_TITLE;
return args;
});
},
//配置全局样式变量
css: {
loaderOptions: {
sass: {
additionalData: `@import "./src/assets/style/Sea.scss";`
}
}
}
}
根目录新增babel.config.js基础配置
module.exports = {
presets: ['@vue/app']
}
根目录新增jsconfig.json基础配置
{
"compilerOptions": {
"target": "es2017",
"allowSyntheticDefaultImports": false,
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules", "dist"]
}
env变量配置,可以根据不同生产环境配置不同变量用于切换环境
最后启动二个版本的项目,大公告成
更多推荐
已为社区贡献3条内容
所有评论(0)