vue打包不能点击

当我们在使用 Vue 打包应用程序时，你可能会遇到一个令人困惑的问题：打包完成后在浏览器中运行应用程序时，发现应用程序中的按钮、链接或其他交互元素都无法点击。

这种情况是由于 Vue 打包应用程序时所生成的文件中包含了一些配置信息，这些信息可能会干扰我们程序中的交互元素。

new Vue({
el: '#app',router,components: {
 App }
,template: ''}
    )

以上是一个 Vue 实例的代码，我们可以看到 'el: #app' 是 Vue 实例的挂载点，意思是告诉 Vue 在哪里渲染应用程序的内容。

在实际开发中，我们通常会在 index.html 文件中定义这个挂载点：

!DOCTYPE html>
    html lang="en">
    head>
    meta charset="UTF-8">
    title>
    Vue App/title>
    /head>
    body>
    div id="app">
    /div>
    script src="./js/vue.js">
    /script>
    script src="./js/app.js">
    /script>
    /body>
    /html>

请注意，我们需要将 Vue 实例挂载在一个带有 id 属性的 div 元素上，这个 div 元素的 id 必须与 Vue 实例的 el 属性一样。

如果你使用了 Vue Cli 来创建项目，则你不需要手动添加上述代码，因为 Vue Cli 会自动生成一个 index.html 文件，其中已包含了一个与Vue 实例对应的挂载点。

但是，当我们将应用程序打包后，在浏览器中运行就会发现交互元素无法点击，这是因为我们忘记了某些重要的配置。

build: {
// 配置生成环境的静态资源路径assetsPublicPath: './',...}

我们需要在我们的config/index.js或是vue.config.js文件中进行配置，来告诉应用程序在哪里可以访问打包后的静态资源。

这里我们给出一份简单的配置示例：

module.exports = {
publicPath: './'}
    ;
    

在编写完上述代码后，我们就可以顺利运行我们的 Vue 应用程序了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！