- 为啥要迁移?
因为打包部署的时候总会报各种莫名其妙的包版本导致的提示,所以希望借这次迁移,升级一下项目原有的依赖,因为开发的项目是基于cube-ui这个框架的。
静态资源
-
有一些图片,因为canvas合成的原因并不能放置在
src/assets
文件夹内,所以需要放置在根目录static/image
下,因为cli3移除了static
文件夹,转而使用public
文件夹存放静态资源。 -
目录结构变更:
├── static # 静态资源 │ └── image # image文件夹 │ ├── a # a模块 │ │ └── n.png # n图片 │ └── b # b模块 │ └── o.png # o图片
├── public # 静态资源 │ └── img # img文件夹 │ ├── a # a模块 │ │ └── n.png # n图片 │ └── b # b模块 │ └── o.png # o图片
-
代码使用变更
当然原来代码里使用这些静态资源的路径就要从<!-- note: 因为webpack里的 assetsSubDirectory: 'static' --> <img src="static/image/a/n.png" />
====>
// demo.js <template> <img :src="`${publicPath}img/a/n.png`" /> </template> <script> export default { data() { return { publicPath: process.env.BASE_URL }; } } </script>
-
建议:
升级到vue-cli3后可以将 publicPath 配置为全局变量,然后统一调用,避免的重复声明 publicPath变量。
eslint和prettier
-
因为我使用vue-cli3新建项目的时候同时勾选了eslint和prettier(并勾选了不单独配置,所有配置均放在package.json中),这就有可能导致两种代码规范下的规则相互冲突。为了解决这个问题,我增加了package.json中的配置:
"eslintConfig": { "rules": { "prettier/prettier": [ "error", { "singleQuote": true } ] } }
可以看到
rules
内新增的内容,就是为了防止冲突。外面最外层rules设置的是ESLint配置,内层error后面的是prettier配置,不要配置混了。
环境变量和模式
├── .env # 在所有的环境中被载入
├── .env.production # 只在 【production】 模式中被载入
├── .env.staging # 只在 【staging】 模式中被载入
├── vue.config.js # vue-cli3配置文件
└── package.json
-
.env
# 为了便于将静态资源(除了index.html)打包发送到cos # 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 VUE_APP_ASSETSDIR=static
-
.env.production
# 部署应用包时的基本 URL。 VUE_APP_PUBLIC_PATH=****** VUE_APP_MODE=procudtion
-
.env.staging
# 为了使得该模式下静态资源包含 hash 以便更好的控制缓存,所以必须设置为 production NODE_ENV=production # 部署应用包时的基本 URL。 VUE_APP_PUBLIC_PATH=...... VUE_APP_MODE=staging
-
vue.config.js
这里因为我之前打包发送到服务器和对象存储分为两个部分,所以,我仍需要配置assetsDir
。- 服务器
index.html
- 对象存储COS
static
(包含许多静态资源js/css/font/img)
module.exports = { publicPath: process.env.VUE_APP_PUBLICPATH || '/', // 部署应用包时的基本 URL。 assetsDir: process.env.VUE_APP_ASSETSDIR, // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 };
- 服务器
-
package.json
{ "scripts": { "build:stage": "vue-cli-service build --mode staging", "build:prod": "vue-cli-service build --mode production" } }
小插曲[vue warn]can’t find element: #app
使用 npm run serve
后页面一片空白(我当时整个人都是懵的,一个晚上挑灯苦研,最终还是一无所获,到公司没办法,只能使用撒手锏…省略无数字),具体办法就是从头新创建一个初始话项目,对比两个项目的 index.html
差异,眼睛瞅瞎了没找到,只能完全复制过来,成功了,迷啊。。。就此解决这个问题。页面成功显示内容。
参考链接
[1] 晚晴幽草 使用ESLint & Prettier美化Vue代码