详细说明项目升级到vue-cli3的正确姿势

时间：2021-08-27 来源：互联网编辑：宝哥软件园浏览：次

一、我以为vue-cli3升级的路线如下：

创建一个vue-cli3项目，并根据原始项目的配置选择每个配置

迁移目录

将src-srcstate-public与旧的package.json进行比较，然后安装纱线并完成。

冉鹅.运行项目并报告一个错误：您正在使用Vue的仅运行时版本.

然后我去查了一下旧项目的相关word文件：

哦，原来vue-cli3的webpack相关文件都得自己写。所以根据官网的指导，在根目录下创建了vue.config.js

此时的粗略配置：

chainwebpack k : config={ config . module。规则(' vue ')。使用(' vue-loader ')。装载机(“vue-loader”)。点击(options={ options.compiler options . preserve white space=false return options })config . resolve . alias . set(' vue $ '，' vue/dist/vue.esm.js ')。设置(' @ '，解析(' src '))

#1未加载公共静态资源

` ` ` const copy webpackplugin=require(' copy-web pack-plugin ')//.//确保静态资源config . resolve . extensions=[]。js '，'。vue '，'。' JSON '，CSS ']config . plugins . push(new copywebpackplugin([{ from : ' public/'，to : ' public ' }])` ` ` # 2 Chrome在查看样式时找不到源文件。

原因：在vue-cli3中，sourceMap默认关闭，样式将打包在主页上。要解决：需要自己配置

//让样式找到源CSS : {sourcemap: true}，# 3生产环境的调试器和控制台不能被uglifyjs-webpack-plugin和uglify-es淘汰

原因：不支持es6，需要配置babel (uglify-es根据配置不显示选项)

解决方案：插件简洁器

` ` const TerserPlugin=require(' terser-web pack-plugin ')if(process . ENV . node _ ENV==' production '){//修改生产环境的配置.新的terserplugin ({cache: true，parallel3360 true，sourcemap3360 true，//如果在生产terserOptions中使用源映射，则必须设置为true 3360 { compression : { Drop _ console : true，Drop _ debugger : true } } })} else {//修改开发环境的配置.} ` ` # 4跨域请求的配置目录中不能配置不同环境的API_URL

原因：vue-cli3需要遵循变量规则，使用VUE_APP前缀

官方规则：在客户端代码中使用环境变量

解决方案：因此您需要创建以下文件：

。本地也可以以指定的模式添加到环境文件中。例如，env.development.local将在开发模式下加载，并被git忽略。

文件内容：

//env . development . local node _ env=development vue _ app _ URL=http://xxx.x.xxx/#5 vue-CLI代理转发控制台重复打印“WebSocket连接到”ws://localhost.'

解决方法：

在vue.config.js中配置的devServer.proxy的Ws为false

结合以上两个步骤，对应的vue.config.js需要编写如下：

const env=process . env . node _ env lettarget=process . env . vue _ app _ URL const devproxy=['/API '，'/']//agent//生成代理配置对象让proxybj={ }；Devproxy.foreach((值，索引)={ proxy obj[值]={ws: false，target: target。//打开代理：在本地创建一个虚拟服务器，然后同时发送和接收请求的数据。这样就不会出现变更原点：真、路径重写3360 {[` $ {Value} `] : Value}}等跨域问题；})//.devserver: {open: true，host:' localhost '，port: 8080，proxy: proxyobj}最后粘贴我的vue.config.js:

const copy webpackplugin=require(' copy-web pack-plugin ')const ter plugin=require(' terser-web pack-plugin ')const path=require(' path ')const env=process。环境。node _ ENVlet目标=进程。环境。vue _ APP _ urlscon ST devProxy=['/API '，'/'] //代理//生成代理配置对象让proxy bj={ }；devProxy.forEach((值，索引)={ proxybj[值]={ ws: false，target: target，//开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题改变起源：真，路径重写： {[`^${value}`]:值} };})函数解析(目录){返回路径。join(_ dirname，dir)}模块。导出={公共路径： '/'，//让样式找到源css: { sourceMap: true }，configureweb pack k : config={//确保静态资源config.resolve.extensions=[' .js '，' .呜呜呜.json '，' .CSS ']配置。插件。push(新的copywebpackkplugin([{从： ' public/'，到： 'public' }])，)if(process。ENV。node _ ENV==' production '){//为生产环境修改配置.新的TerserPlugin({ cache: true，parallel: true，sourceMap: true，//如果在生产简洁选项中使用源映射，则必须设置为true 3360 { compression : { drop _ console : true，drop _ debugger : true } })else {//为开发环境修改配置.} }，chain web pack k : config={ config。模块.规则(' vue ').使用(“vue-loader”).装载机(“真空装载机”).点击(选项={ options。compilerooptions。preservewhitespace=false return options })配置。决心。别名.set('vue$ '，' vue/dist/vue.esm.js ').set('@ '，resolve(' src ')}，devServer: { open: true，host: 'localhost '，port: 8080，proxy: proxyObj } }三Eslint .相关报错及配置

module.exports={ root: true，env: { node: true }，' extends ' :[' plugin : vue/essential '，' @vue/standard' ]，rule : { ' generator-star-spacing ' : ' off '，' object-curve-spacing ' : ' off '，//最常出现的错误no-unused-vars': 'off '，//最常出现的错误vue/no-use-v-if-with-v-for ' :[' error '，{ ' allowingiterinionvar ' : true }]，' no-console ' :进程。ENV。node _ ENV===' production '？错误' : '关闭','无调试器：流程。ENV。node _ ENV===' production '？错误： 'off' }，parserroroptions : { parser 3360 ' babel-eslint ' } }最后的最后，跑个项目

纱线服务