如何在Visual Studio Code中设置本地Web服务器

29

我是新手在VS Code中使用TypeScript。我正在尝试设置本地服务器路径以打开我的HTML文件。如何设置并且每次尝试设置时都会出错。我无法在终端中使用"npm install"和"npm start"命令。如果我使用这个命令,我会得到一个错误。

文件夹结构:

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    
1个回答

53

只需要使用“Live Server”扩展程序即可。直接在VS Code中安装该扩展即可,你将获得一个链接,放在编辑器底部,自动启动和运行服务器,并且可以立即查看HTML。

还需查看:live-server-web-extensionLive Server


1
请注意,截至今天,它已经有两年没有更新,Github 上有数百个问题。由于某些内容安全策略的怪癖,我刚刚将其移除,不确定在2021年是否仍然适用。 - Michael Jess
@MichaelJess:内容安全策略肯定与您的设置有关。该应用程序仍然是一个非常好的和有用的选项,可以为Studio Code提供集成的实时服务器。https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&ssr=false#review-details - k.vincent
@k.vincent 这是旧的实时服务器和同样老的项目模板的组合,尽管我必须说不知道一个纯HTML页面如何触发这种行为。无论如何,我的建议是最好寻找维护良好的工具,而这不是其中之一。使用带有CLI开发服务器的最新模板对我很有帮助。 - Michael Jess
1
@ZX9 你的意思是除了上面的评论之外还有其他的吗?我不认为我的做法是普遍适用的。我习惯于使用从命令行界面运行的开发服务器,并且这通常包含在开发工具中。在我的情况下,当我使用Vue CLI而不是尝试通过此VSCode插件托管Vue应用程序时,问题就解决了。 - Michael Jess
这太棒了。大大减少了开发时间。文件保存后自动刷新,可以立即看到更改。 - Dinith Rukshan Kumara
显示剩余5条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接