AnswerBun.com

cómo acceder a mi aplicación Vue desde una IP externa?

Stack Overflow en español Asked by javascript110899 on October 17, 2020

Estoy desarrollando una aplicación "Vue" y necesito acceder a ella desde una ip externa para comprobar su rendimiento en los dispositivos móviles. La versión de mi webpack es la 3.12.0 y mi "Vue" es la 2.5.2

{
 
  "scripts": {
    "build": "node build/build.js",
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --allowed-hosts 192.168.42.126",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src"
  },
  "dependencies": {
    "@babel/polyfill": "^7.11.5",
    "axios": "^0.20.0",
    "bootstrap": "^4.5.2",
    "bootstrap-vue": "^2.16.0",
    "core-js": "^3.6.5",
    "mobile-device-detect": "^0.4.3",
    "style-resources-loader": "^1.3.3",
    "vue": "^2.5.2",
    "vue-router": "^2.8.1",
    "vuex": "^3.5.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.6",
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "sass": "^1.26.10",
    "sass-loader": "^7.3.1",
    "sass-resources-loader": "^2.1.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.12.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  }
}

y mi webpack.dev.conf.js


'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: config.dev.devtool,

  // these devServer options should be customized in /config/index.js
  devServer: {
    clientLogLevel: 'warning',
    host: '0.0.0.0',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true,
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    disableHostCheck: true,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll,
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]
})

module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = process.env.PORT || config.dev.port
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err)
    } else {
      // publish the new Port, necessary for e2e tests
      process.env.PORT = port
      // add port to devServer config
      devWebpackConfig.devServer.port = port

      // Add FriendlyErrorsPlugin
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
        },
        onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
      }))

      resolve(devWebpackConfig)
    }
  })
})

He seguido los pasos marcados para la configuración y para poder acceder desde una dirección ip, pero cuando inicio el proyecto "npm run dev" sólo me da acceso desde localhost. ¿Qué estoy haciendo mal?
Tambien he probado el comando ipconfig para tratar de acceder desde mi movil con las ip que da y solo una denominada "Default Gateway" me abre una pagina de mi servidor de internet y en la que veo los dispositivos conectados, pero no veo nada mas.

gracias a todos por su tiempo y ayuda

un saludo

Add your own answers!

Related Questions

Gridview jquery se pierde cuando recargo datatable

1  Asked on December 23, 2020 by ibeth-carmona

       

Android: Problemas con formato de fechas (SimpleDateFormat)

0  Asked on December 22, 2020 by verlyn-luna

   

¿crear lista de botones del mismo tamaño en flutter?

1  Asked on December 21, 2020 by harvey66

   

Herramienta de modelado de bases de datos nosql

0  Asked on December 21, 2020 by jose-ignacio-gonazlez

       

¿Qué es memoización y cómo se usa?

1  Asked on December 21, 2020 by candid-moe

     

Exportar a Excel en ASP.NET

2  Asked on December 21, 2020 by carlosr93

   

Mi aplicación WPF no se ejecuta en otros ordenadores

1  Asked on December 21, 2020 by devinthe30s

       

Json undefined problema con mostrar los valores

0  Asked on December 20, 2020 by locura

         

Como detener un bucle for sin usar un break?

2  Asked on December 20, 2020 by julin-taborda

   

Funcionalidad del return en JavaScript

3  Asked on December 19, 2020 by junner13

 

Porqué no se muestra la imagen de fondo?

0  Asked on December 19, 2020 by christian-hidalgo

   

Odoo server no se inicia en Windows 10

0  Asked on December 18, 2020

     

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP