[emailprotected]项目迁移日志的详细说明

[emailprotected]项目迁移日志

虽然[emailprotected]已经被广泛使用了很长时间，但是很少有人应该在新项目中使用[emailprotected]。但是对于一些较早的vue项目，如果当时没有做一些优化和配置，随着webpack vue等包的升级，一些配置变得不一样了，关于[emailprotected]项目的文档和博客越来越少。有问题就可能有麻烦，所以我考虑就地升级目前的【emailprotected】项目。

项目结构

[emailprotected]项目结构，其中红色圆圈部分仅在2.x版本中可用。

[emailprotected]目录结构，箭头指示的两个文件的功能几乎完全替代了上面build和config文件夹中文件的功能，以及根目录下的postcss和babel配置文件。

迁移配置

用以下内容创建一个新的babel.config.js文件

模块。导出={预设： ['@ vue/app']}创建一个新的vue.config.js文件，内容为：

const is ProducT=process . ENV . NODE _ ENV===' production '；module . exports={ public path : is product？XXX ' : ' ' }；需要注意的是，在[emailprotected]中设置的assetsPublicPath属性已经在[emailprotected]中重命名为PublicPath。这个属性可以简单地理解为打包的js css img文件在被index.html文件导入时添加的前缀。

将静态文件夹直接重命名为public，并将根目录中的index.html文件拖到public文件夹中。这里需要注意的是，当我们放入static的静态资源在代码中被引用时，路径可能会写成/static/img/xxx.jpg，移动到公共文件夹后，需要删除静态前缀，直接引用/img/xxx.jpg。

直接拖动静态文件夹中的所有资源，并创建一个新的公共文件夹

下一个变化是package.json中的依赖包

//修改执行脚本' start' :' NPM runserve '，' serve ' : ' vue-CLI-service serve '，' build ' : ' vue-CLI-service build '，' lint' :' vue-CLI-servicelint '，//需要手动更新vue和vue-template-编译器的版本。如果版本中没有对象npm start，就不会成功，但与版本号不严格一致，对应关系也没有具体研究过。直接从[emailprotected]初始化项复制版本号，即“dependencies”: {.vue' :' 2.6.10 '，' vue-router' 3360' 2.3.1 '，' vuex ' : ' 2//这里的七个依赖项都必须存在，而且因为webpack函数内置在@vue/cli-service中，所以可以删除原来devDependencies中与根打包相关的依赖包。”devdependencies ' : { ' @ vue/CLI-plugin-babel ' : '^3.7.0' '，@ vue/CLI-plugin-eslint ' : '^3.7.0' '，@vue/cli-service': '^3.7.0'，' babel-eslint': '^10.0.1'，' eslint': '^5.16.0'，' eslint-plugin-vue': '^5.0.0'，' vue-template-compiler ' 3: '^2.5.21'，}

删除原始依赖项并重新安装新的依赖项

Rm -rf node_modules cnpm我再次尝试npm启动

这时很可能会遇到一个问题：

[Vue警告]:您正在模板编译器不可用的地方使用Vue的仅运行时版本。要么将模板预编译成呈现函数，要么使用编译器包含的构建。

是因为目前vue的编译版是错误的，主要是webpack的配置修改造成的。随随便便就能找到很多解决方案，但最好的方法是遵循[emailprotected]

//修改main . js//[email protected]new Vue中新Vue参数的形式({el:' # app '，router，components: { app }，Template 3360 ' app/' })//修改为[email protected]，new Vue中的默认形式({router，render:h=h (app)，})。$ mount ('# app ')。以上就是本文的全部内容。希望对大家的学习有帮助，多多支持我们。