一、改变vue打包的路径
修改config目录下的index.js
var path = require('path')
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/', //修改打包后的文件的引入路径(例如/package/)
productionSourceMap: true,
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
},
}
二、vue img 的 src 绑定问题
<img :src="imgUrl">
当imgUrl设置为本地相对路径的一个图片之后,发现无法显示,正确的做法是把图片文件放到static文件夹下即可
三、$nextTick
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。 $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM,示例如下:
methods: {
getHeight() {
let height = document.getElementById('mainForm').offsetHeight;
console.log(height);
},
},
mounted() {
this.$nextTick(() => {
this.getHeight();
})
}
vue中定义的变量包含script结束标签报错
在vue中,如果定义一个变量包含script结束标签的话,整个项目就会报错,我是项目中有一个复制代码的功能,复制的代码中包含script标签。
copyCode(link) {
let copyCodeBefore = '<script charset="UTF-8" defter>var link = "';
let copyCodeAfter = '"</script>';
let copyCode = copyCodeBefore + link + copyCodeAfter;
return copyCode;
}
这样写的结果就会导致vue项目报错:
Syntax Error: Unterminated string constant
其实报错的原因是script的结束标签。
解决方案:给script的结束标签斜杠“/”前加上转义反斜杠“\”即可。
copyCode(link) {
let copyCodeBefore = '<script charset="UTF-8" defter>var link = "';
let copyCodeAfter = '"<\/script>';
let copyCode = copyCodeBefore + link + copyCodeAfter;
return copyCode;
}
这样报错问题就解决了。