将vue部署到服务器如何修改build • Worktile社区

worktile

Worktile官方账号

将Vue部署到服务器需要进行一些修改，主要是修改Vue项目的打包配置文件。在Vue项目中，打包的配置文件是位于项目根目录下的build文件夹中的webpack.prod.conf.js文件。下面是修改build文件夹中webpack.prod.conf.js文件的步骤：

打开项目根目录下的build文件夹，并找到webpack.prod.conf.js文件。
找到配置文件中的output字段，该字段指定了打包后生成的文件路径和名称。默认情况下，生成的文件保存在dist文件夹中。如果你想将Vue项目部署到服务器的根目录下，可以不做修改。如果你希望部署到服务器的子目录下，例如http://www.example.com/myapp，可以将output字段中的publicPath设置为'/myapp/'。
在output字段下方的plugins数组中，找到一个名为new HtmlWebpackPlugin()的配置项，该配置项定义了生成的HTML文件的名称和路径。如果你希望在Vue项目部署到服务器的子目录下，需要修改该配置项中的filename字段，将其改为'/myapp/index.html'。
如果你的Vue项目中使用了Vue Router，并且使用了history模式，需要进行额外的配置。找到文件中的devServer字段，在该字段中添加一行配置：historyApiFallback: true。这将确保当用户访问不存在的路由时，服务器仍然返回index.html文件，并由Vue Router进行处理。
保存修改后的文件。

在完成上述修改后，即可将Vue项目打包并部署到服务器上。你可以使用命令行工具进入项目根目录，运行npm run build命令来编译项目。编译完成后，将生成的dist文件夹中的文件上传到服务器即可。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

将Vue部署到服务器时，可以通过修改build来进行配置。下面是修改build的一些常用方法：

打开项目中的vue.config.js文件，如果没有则新建一个。这个文件用于配置Vue项目的构建配置。
在vue.config.js文件中，可以使用publicPath属性来指定静态资源的访问路径。例如，如果你将Vue项目放在服务器的根目录下，则可以将publicPath设置为空字符串：

module.exports = {
  publicPath: ''
}

如果你的Vue项目不是放在服务器的根目录下，而是在一个子路径下，那么可以将publicPath设置为相应的子路径：

module.exports = {
  publicPath: '/sub-path/'
}

对于使用Vue Router的项目，如果使用了history模式，需要在vue.config.js中设置outputDir属性，以确保正确的路由导航。例如：

module.exports = {
  publicPath: '/',
  outputDir: 'dist'
}

如果你想要优化构建生成的文件，可以使用configureWebpack选项来进行定制。例如，你可以将构建生成的文件进行压缩和混淆：

const TerserPlugin = require('terser-webpack-plugin')

module.exports = {
  configureWebpack: {
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: {
               // 压缩相关配置
            },
            mangle: {
               // 混淆相关配置
            }
          }
        })
      ]
    }
  }
}

通过以上的方式，可以对Vue项目的build进行修改，以便更好地部署到服务器上。注意修改完后需要重新执行npm run build命令来生成新的构建文件。

1年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

将Vue部署到服务器的过程中，需要对项目进行打包，然后将打包后的文件上传至服务器。在Vue中，使用Vue CLI进行打包，并可以对打包后的文件进行一些修改以适应服务器的部署环境。

以下是将Vue项目部署到服务器的具体操作流程：

第一步：使用Vue CLI打包项目

打开终端，进入到项目根目录。
运行命令npm run build，将会自动执行打包操作。
打包完成后，会在项目根目录下生成一个dist目录，里面包含了打包后的文件。

第二步：修改打包后的文件

进入到dist目录中，可以看到有一个index.html文件和一些静态资源文件夹（如js、css等）。
打开index.html文件，在head标签中查找以下代码：

  <base href="/">

这段代码指定了网页的基准URL，需要根据部署环境进行修改。如果项目部署时需要访问的URL为www.example.com/myapp/，则需要将<base href="/">修改为<base href="/myapp/">。
3. 根据需要，可以对index.html文件进行其他的修改，例如指定meta标签、调整CSS引入顺序等。

第三步：将打包后的文件上传至服务器

安装并使用FTP工具（如FileZilla）连接服务器。
将dist目录中的所有文件上传至服务器上的指定目录，确保上传后的文件结构与dist目录完全一致。

第四步：配置服务器环境

在服务器上找到要部署Vue项目的目录，并确保具有读取静态文件的权限。
配置服务器，将URL请求定向到部署的Vue项目，默认情况下在Vue项目的根目录下找到index.html文件即可。

至此，Vue项目已成功部署到服务器上。用户在浏览器中输入服务器的URL地址即可访问部署的Vue项目。

注意：在部署前，确保服务器已经安装了Node.js和npm，并且已经安装了Vue CLI。另外，根据具体的部署环境，可能还需要进行一些额外的配置，例如代理设置、HTTPS配置等。

1年前 0条评论