首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

关闭控制台后,Vue cli在VPS服务器上运行production build

关闭控制台后,Vue CLI在VPS服务器上运行Production build的步骤如下:

  1. 在VPS服务器上安装Node.js和npm:在服务器上运行以下命令,以安装Node.js和npm。
代码语言:txt
复制
sudo apt update
sudo apt install nodejs
sudo apt install npm
  1. 在VPS服务器上安装Vue CLI:在服务器上运行以下命令,以安装Vue CLI。
代码语言:txt
复制
sudo npm install -g @vue/cli
  1. 创建Vue项目:在服务器上运行以下命令,以创建一个新的Vue项目。
代码语言:txt
复制
vue create my-project
  1. 进入项目目录:运行以下命令,进入新创建的Vue项目的目录。
代码语言:txt
复制
cd my-project
  1. 构建项目:运行以下命令,以生成用于生产环境的构建文件。
代码语言:txt
复制
npm run build

这将在项目根目录下生成一个dist文件夹,其中包含优化和压缩后的HTML、CSS和JavaScript文件。

  1. 配置Nginx服务器:安装和配置Nginx服务器,以便将Vue项目的静态文件提供给用户。打开Nginx配置文件(一般在/etc/nginx/sites-available/default),找到root指令,将其值设置为Vue项目dist目录的绝对路径,如:
代码语言:txt
复制
server {
    listen 80;
    server_name example.com;
    root /path/to/my-project/dist;
    ...
}

保存并关闭文件。

  1. 重启Nginx服务器:运行以下命令,以重启Nginx服务器,以使配置更改生效。
代码语言:txt
复制
sudo service nginx restart

现在,Vue项目应该已经成功地部署在VPS服务器上的Production build模式下。

Vue CLI是一个基于Vue.js的脚手架工具,用于快速创建、开发和构建Vue.js应用程序。它提供了许多开箱即用的特性和插件,使Vue.js应用程序的开发过程更加简单和高效。

Vue.js是一种流行的JavaScript框架,用于构建现代化的、响应式的用户界面。Vue.js具有轻量级的设计,易于学习和使用,可以与其他库或现有项目集成。

VPS服务器(Virtual Private Server,虚拟专用服务器)是一种虚拟化技术,将一个物理服务器划分为多个虚拟服务器实例,每个实例都具有自己的操作系统和资源。VPS服务器提供了更高的灵活性和性能,适用于托管Web应用程序和服务。

在此过程中,腾讯云提供了一系列与云计算和Web托管相关的产品,如腾讯云服务器(CVM)、腾讯云对象存储(COS)、腾讯云CDN等。您可以访问腾讯云官方网站(https://cloud.tencent.com/)了解更多关于这些产品的详细信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 我的Vue不小心跨域了o(╥﹏╥)o 干它

    vue跨域代理解决方案 ? 其实需求比较简单,就是先post模拟登陆到B服务器,然后get请求B服务器指定接口的数据,返回给A服务器。 当然这里的A服务器目前是处于我本机电脑。...// 默认情况下,Vue CLI 会假设你的应用是被部署一个域名的根路径 //例如 https://www.my-app.com/。如果应用被部署一个子路径,你就需要用这个选项指定这个子路径。...//baseUrl 从 Vue CLI 3.3 起已弃用,请使用publicPath //baseUrl: process.env.NODE_ENV === "production" ?..../" : "/", // outputDir: npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致) outputDir: "mycli3...== 'production', //是否使用包含运行时编译器的 Vue 构建版本。

    1.1K20

    干货|以Vue为例,如何提升小程序开发效率?

    语言,小程序的前端开发学习成本较低。小程序的基础是否还有效率提高办法呢?...可以帮助开发者提高效率,增加开发体验,开发者只需要熟悉vue的api语法使用即可上手。官方还提供了了基于@vue/cli脚手架的快速开发方式。...3)如何捕获 app 的 onError由于 onError 并不是完整意义的生命周期,所以只提供一个捕获错误的方法, app 的根组件添加名为 onError 的回调函数即可。...--watch$ npx taro build --type weapp # watch 同时开启压缩$ set NODE_ENV=production && taro build --type weapp...--watch # Windows$ NODE_ENV=production taro build --type weapp --watch # Mac三、FinClipFinClip主要将小程序的能力

    40830

    vue全局 CLI 配置——vue.config.js

    默认情况下,Vue CLI 会假设你的应用是被部署一个域名的根路径,例如 https://www.my-app.com/。如果应用被部署一个子路径,你就需要用这个选项指定这个子路径。...'/production-sub-path/' : '/' } outputDir Type: string Default: 'dist' 当运行 vue-cli-service build...如果你无法使用 Vue CLI 生成的 index HTML,你可以通过将这个选项设为 false 来关闭文件名哈希。...== 'production' } runtimeCompiler Type: boolean Default: false 是否使用包含运行时编译器的 Vue 构建版本。...devServer.proxy Type: string | Object 如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器

    3K30

    小程序开发可用到的Vue框架及工具梳理

    语言,小程序的前端开发学习成本较低。小程序的基础是否还有效率提高办法呢?...可以帮助开发者提高效率,增加开发体验,开发者只需要熟悉vue的api语法使用即可上手。官方还提供了了基于@vue/cli脚手架的快速开发方式。...3)如何捕获 app 的 onError由于 onError 并不是完整意义的生命周期,所以只提供一个捕获错误的方法, app 的根组件添加名为 onError 的回调函数即可。...-watch$ npx taro build --type weapp# watch 同时开启压缩$ set NODE_ENV=production && taro build --type weapp...--watch # Windows$ NODE_ENV=production taro build --type weapp --watch # Mac三、FinClipFinClip主要将小程序的能力

    2.2K20

    vue-cli sourcemap私有化部署配置

    ,但我vue-cli4生成的项目中发现这里还是有个小坑的,故,以此记录 我们先打开vue-cli 的文档看下相关配置 // vue.config.js module.exports = { //...好在cli提供了这样的命令,毕竟webpack确实配置太复杂了 点击查看审查项目的 webpack 配置文档 运行 vue inspect --mode production > output.js...哈哈,恭喜你,你又遇到了一个新问题 cli-service之sourcemap相关的简单刨析 其实,我们排查两个sourcemap指向的时候就应该去翻看cli的源码了,实际我本人就是这样的,而且这应该是比较简单的...,但这需要你相对熟悉cli和webpack,而且我个人觉得直接去看webpack的配置对你的分析、理解更好 很显然,通过 build 命令我们知道,第一时间就应该去看 cli-service ,而vue-cli...而这就是原因,说明一下,使用SourceMapDevToolPlugin时一定要将压缩插件的sourcemap设置为true,否则将不会生成sourcemap,更谈不对sourcemap的更细粒度的控制

    14710

    vue.config.js 配置文件

    默认情况下,Vue CLI 会假设你的应用是被部署一个域名的根路径,例如 https://www.my-app.com/。如果应用被部署一个子路径,你就需要用这个选项指定这个子路径。...'/production-sub-path/' : '/' } #outputDir Type: string Default: 'dist' 当运行 vue-cli-service build...然而,这也要求 index 的 HTML 是被 Vue CLI 自动生成的。如果你无法使用 Vue CLI 生成的 index HTML,你可以通过将这个选项设为 false 来关闭文件名哈希。...== 'production' } #runtimeCompiler Type: boolean Default: false 是否使用包含运行时编译器的 Vue 构建版本。...#devServer.proxy Type: string | Object 如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器

    2.8K00

    Taro——安装和使用

    前言 Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 / H5 / RN 等应用。...$ yarn # OR 使用 cnpm 安装依赖 $ cnpm install # OR 使用 npm 安装依赖 $ npm install 运行项目 详细的命令介绍可以查看官方文档-编译运行 #...type weapp --watch $ npx taro build --type weapp # watch 同时开启压缩 $ set NODE_ENV=production && taro build...--type weapp --watch # Windows $ NODE_ENV=production taro build --type weapp --watch # Mac 预览项目 下载并打开微信开发者工具...需要注意开发者工具的项目设置: 需要设置关闭 ES6 转 ES5 功能,开启可能报错 需要设置关闭上传代码时样式自动补全,开启可能报错 需要设置关闭代码压缩上传,开启可能报错 设置忽略文件 dist

    8210

    Vue2.0 新手完全填坑攻略——从环境搭建到发布

    开发环境解释 Homebrew 1.0.6(Mac)、Node.js 6.7.0、npm 3.10.3、webpack 1.13.2、vue-cli 2.4.0、Atom 1.10.2 安装环境 打开终端运行以下命令...脚手架 npm install vue-cli -g 硬盘上找一个文件夹放工程用的,终端中进入该目录 Mac cd 目录路径 根据模板创建项目 vue init webpack-simple...还可能报其他错误,需要更新一下 vue-cli npm update vue-cli 然后可以查看一下当前全局 vue-cli 的版本 npm view vue-cli 安装一下这个依赖到工程开发环境...开发环境解释 Homebrew 1.0.6(Mac)、Node.js 6.7.0、npm 3.10.3、webpack 1.13.2、vue-cli 2.4.0、Atom 1.10.2 安装环境 打开终端运行以下命令...脚手架 npm install vue-cli -g 硬盘上找一个文件夹放工程用的,终端中进入该目录 Mac cd 目录路径 根据模板创建项目 vue init webpack-simple

    1.8K50

    vue-cli首屏优化技巧

    先挂载到服务器试试 好家伙 这加载时间 仿佛过了半个世纪 ?...首屏页面整整加载了 9s 光加载那个大文件就花了 8s 这必须得做个优化了,没有用户能忍受 9s的白屏而不关闭页面的 过程中,我还顺便把项目从 vuecli 2.x迁移到了 vuecli 3,所以接下来还会介绍一些它们优化的异同...分析 vuecli 2.x自带了分析工具 只要运行 npm run build --report 如果是 vuecli 3的话,先安装插件 cnpm intall webpack-bundle-analyzer...首屏会把这十几个路由文件,都一口气下载了 所以我们要关闭这个功能, vue.config.js中设置 参考官网的做法: ?...$alert = MessageBox.alert 注意 MessageBox注册方法的区别,并且我们虽然用到了 alert,但并不需要引入 Alert组件 .babelrc文件中添加( vue-cli

    97410

    【Vuejs】317- 提升90%加载速度——Vuecli下的首屏性能优化

    先挂载到服务器试试 好家伙 这加载时间 仿佛过了半个世纪 ?...首屏页面整整加载了 9s 光加载那个大文件就花了 8s 这必须得做个优化了,没有用户能忍受 9s的白屏而不关闭页面的 过程中,我还顺便把项目从 vuecli 2.x迁移到了 vuecli 3,所以接下来还会介绍一些它们优化的异同...分析 vuecli 2.x自带了分析工具 只要运行 npm run build --report 如果是 vuecli 3的话,先安装插件 cnpm intall webpack-bundle-analyzer...首屏会把这十几个路由文件,都一口气下载了 所以我们要关闭这个功能, vue.config.js中设置 参考官网的做法: ?...$alert = MessageBox.alert 注意 MessageBox注册方法的区别,并且我们虽然用到了 alert,但并不需要引入 Alert组件 .babelrc文件中添加( vue-cli

    2.9K20
    领券