vue2打包npm build

以下是Vue2打包NPM Build的步骤：

1. 首先，确保你的项目中已经安装了Vue CLI。如果没有安装，可以通过以下命令在全局安装：

npm install -g @vue/cli

2. 接着，在项目目录下创建一个新的文件夹，例如"dist"：

mkdir dist

3. 在package.json文件中，添加以下代码：

"scripts": {
  "build": "vue-cli-service build --target lib --name my-library ./src/index.js"
}

这段代码的意思是，使用Vue CLI打包项目，目标是生成一个库文件，库的名字为"my-library"，入口文件为"./src/index.js"。

4. 然后，在终端中执行以下命令，进行打包：

npm run build

5. 打包完成后，可以在"dist"文件夹中看到生成的库文件。

6. 最后，可以上传到npm仓库，供其他人使用。

以上就是Vue2打包NPM Build的步骤。

相关问题

vue2中用npm run build打包成dist文件上传服务器后怎么在网址中显示页面名称

在Vue2中使用npm run build打包成dist文件后，可以通过修改服务器的配置文件来实现在网址中显示页面名称。

1. 首先，需要在服务器上配置一个反向代理，将所有请求都转发到index.html文件中。这可以使用Nginx或Apache等Web服务器来实现。

2. 在Vue项目的router.js文件中，可以通过设置路由的base属性来指定页面的访问路径。例如：

const router = new VueRouter({
  mode: 'history',
  base: '/myapp/',
  routes: [
    // ...
  ]
})

这里将base设置为/myapp/，表示所有路由的访问路径都会以/myapp/为前缀。

3. 打包成dist文件后，将dist文件夹上传到服务器的根目录下的myapp文件夹中。

4. 在Nginx的配置文件中，添加如下配置：

location /myapp {
  try_files $uri $uri/ /myapp/index.html;
}

这里的location表示将所有以/myapp开头的请求都转发到/myapp/index.html文件中。如果请求的文件不存在，则返回404错误。如果请求的是一个目录，则自动添加/并尝试查找index.html文件。

5. 重启Nginx服务器，并通过http://yourdomain.com/myapp/访问应用程序。现在，页面名称将显示在网址中，例如：http://yourdomain.com/myapp/home。

vue3项目npm run build和npm run build-only的区别

vue3项目中，npm run build和npm run build-only都是用来打包生成最终用于部署的静态文件，但两者之间还是有一定区别的。

npm run build是执行一连串的构建任务，包括清除旧的生成文件、Lint代码规范、Webpack打包、图片压缩等操作，最终生成一个生产环境的最终版本的静态文件，可以被直接用于部署。这个任务会检查和修改代码并执行所有必要的编译和打包。它用于构建和发布最终生产版本的应用程序，当代码都准备好要部署时，建议使用。

npm run build-only相比于npm run build则更加单纯，只会执行Webpack打包的构建任务，生成最终版本的静态文件，由于没有其他的设备进行检查和修改，所以速度更快，但缺乏检查和压缩等功能。

因此，一般情况下，在开发过程中使用npm run build-only来快速生成构建后的文件，而在正式发布前则最好使用npm run build，以确保代码按照规范进行检查和压缩，生成更加适合部署的静态文件。