【问题标题】:How to set local web server in Visual Studio Code如何在 Visual Studio Code 中设置本地 Web 服务器
【发布时间】:2018-06-03 03:20:14
【问题描述】:

我是 VS 代码的新手并且在 typescript 中工作。只是我正在尝试设置本地服务器路径以打开我的 HTML 文件。如何设置它以及当我尝试设置时总是出错。我无法在终端中使用此(NPM 安装)和(NPM 启动)命令。如果我使用此命令,我会收到错误消息。 任何代理问题?如何在 VS 代码中解决这个问题?

文件夹结构:

TsDemo--folder name

.vscode
   ->launch.json
   ->tasks.json
out
    ->app.js
    ->app.js.map

app.ts
index.html 
tsconfig.json

我关注了这个链接:https://blogs.msdn.microsoft.com/cdndevs/2016/01/24/visual-studio-code-and-local-web-server/ 但不工作。 如果我使用这个命令:D:\TsDemo>NPM install

        D:\TsDemo>npm install
        npm ERR! code ETIMEDOUT
        npm ERR! errno ETIMEDOUT
        npm ERR! network request to https://registry.npmjs.org/lite-server failed, reason: connect ETIMEDOUT 10.232.192.45:8080
        npm ERR! network This is a problem related to network connectivity.
        npm ERR! network In most cases you are behind a proxy or have bad network settings.
        npm ERR! network
        npm ERR! network If you are behind a proxy, please make sure that the
        npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

        npm ERR! A complete log of this run can be found in:
        npm ERR!     C:\Users\AppData\Roaming\npm-cache\_logs\2017-12-20T14_16_49_680Z-debug.log

如果我使用这个命令:D:\TsDemo>NPM start

        D:\TsDemo>npm start
        >TSDEMO@1.0.0 start D:\TsDemo
        > npm run lite

        npm WARN invalid config loglevel="notice"

        > TSDEMO@1.0.0 lite D:\TsDemo

        >lite-server --port 10001

        'lite-server' is not recognized as an internal or external command,
        operable program or batch file.
        npm ERR! code ELIFECYCLE
        npm ERR! errno 1
        npm ERR! TSDEMO@1.0.0 lite: `lite-server --port 10001`
        npm ERR! Exit status 1
        npm ERR!
        npm ERR! Failed at the TSDEMO@1.0.0 lite script.
        npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
        npm WARN Local package.json exists, but node_modules missing, did you mean to install?


        npm ERR! A complete log of this run can be found in:
        npm ERR!     C:\Users\411732\AppData\Roaming\npm-cache\_logs\2017-12-20T14_07_41_636Z-debug.log
        npm ERR! code ELIFECYCLE
        npm ERR! errno 1
        npm ERR! TSDEMO@1.0.0 start: `npm run lite`
        npm ERR! Exit status 1
        npm ERR!
        npm ERR! Failed at the TSDEMO@1.0.0 start script.
        npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
        npm WARN Local package.json exists, but node_modules missing, did you mean to install?

        npm ERR! A complete log of this run can be found in:
        npm ERR!     C:\Users\AppData\Roaming\npm-cache\_logs\2017-12-20T14_07_41_694Z-debug.log    

【问题讨论】:

    标签: typescript typescript1.8


    【解决方案1】:

    只需使用 Live Server Extension。直接从 VS Code 安装它,你会没事的。然后,您将在编辑器底部有一个链接,用于自动启动和运行服务器,并立即查看您的 HTML。

    同时检查:live-server-web-extensionLive Server

    【讨论】:

    • 如果您使用的是“远程 SSH”扩展,显然不会——这是许多当前开发人员的默认设置。我想在 VSC 中设置断点,在浏览器中打开一个 URL,并在断点处在 VSC 中暂停执行。 LiveServer 不会这样做,至少在没有未提及的配置的情况下不会这样做。
    • 这很有帮助!,谢谢!
    • 请注意,截至今天,它已经有 2 年没有更新了,并且在 Github 中有数百个问题。由于一些内容安全政策的怪癖,我刚刚删除了它,不确定这在 2021 年是否仍然有效。
    • @MichaelJess:内容安全策略肯定与您的设置有关。对于 Studio Code 的集成 Live Server,该应用程序仍然是一个很好且有用的选项。 https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&ssr=false#review-details
    • @ZX9 你的意思是除了上面的评论?我不相信我所做的通常适用。我习惯于使用从 CLI 运行的开发服务器,而这正是如今开发工具中通常包含的内容。就我而言,当我使用 Vue CLI 而不是尝试通过此 VSCode 插件托管 Vue 应用程序时,问题就消失了。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-07-06
    • 1970-01-01
    • 2017-12-13
    • 2020-01-15
    • 2021-08-28
    • 2021-01-19
    • 2015-10-11
    相关资源
    最近更新 更多