html,js,css合并到vue项目中

Posted 2021-03-15 心语星愿2017

项目目录 ： -webpage下有src和static文件夹，src下有assets文件夹

　　　　  -webpage

　　　　　　　　-src

　　　　　　　　　　-assets

　　　　　　　　-static

一、html文件改成.vue格式的文件demo.vue，内容修改成如下

<template>
</template>
<script>
export default{

}
</script>
二、将css文件放到assets文件夹下,将js文件放到static文件夹下
三、demo.vue代码中

<script>
import ‘@/assets/scss/monitor.css‘
export default {
    data(){
       return{}
    }
    mounted(){


        var cameraData=JSON.parse(this.$route.query.data.otherParameter)   
        var usernamedata=cameraData[0].value
        var passworddata=cameraData[1].value
        var portdata=cameraData[2].value
        var ipdata=cameraData[3].value 
 
        const datascript=document.createElement(‘script‘)
        datascript.type = ‘text/javascript‘
        datascript.text="var username=‘"+usernamedata+"‘;
           var    password=‘"+passworddata+"‘;
           var port=‘"+portdata+"‘;
           var ip=‘"+ipdata+"‘";
       document.body.appendChild(datascript)

       const firscriptItem = document.createElement(‘script‘)
       firscriptItem.type = ‘text/javascript‘
       firscriptItem.src = ‘./static/jquery-1.7.1.min.js‘
       document.body.appendChild(firscriptItem)

       const secscriptItem = document.createElement(‘script‘)
       secscriptItem.type = ‘text/javascript‘
       secscriptItem.src = ‘./static/webVideoCtrl.js‘
       document.body.appendChild(secscriptItem)

       const trdscriptItem = document.createElement(‘script‘)
       trdscriptItem.type = ‘text/javascript‘
       trdscriptItem.src = ‘./static/monitor.js‘
       document.body.appendChild(trdscriptItem)

}
}
</script>

按以上步骤完成即可

附：.vue文件跳转至html文件，可使用a标签

<a href=‘src/........./demo.html‘>