Vue常见问题总结（改变vue打包路径、img的src绑定问题、$nextTick、变量包含script结束标签报错）

一、改变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;
}

这样报错问题就解决了。