Vue3 打包学习笔记

起步

安装

请先确保您已经安装了 Node.js 和 npm。然后，使用以下命令安装 Vue CLI：

Copy Code
npm install -g @vue/cli

初始化项目

使用以下命令创建一个新的 Vue 项目：

Copy Code
vue create my-project

根据提示进行选择和配置，直到项目创建完成。

添加代码

在 src 目录下创建一个名为 index.js 的文件，添加以下代码：

javascriptCopy Code
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

在 src 目录下创建一个名为 App.vue 的文件，添加以下模板：

htmlCopy Code
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue3!'
    }
  }
}
</script>

打包配置

配置文件

创建 vue.config.js 文件，在文件中添加以下内容：

javascriptCopy Code
module.exports = {
  outputDir: 'dist',
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-project/'
    : '/'
}

outputDir 指定打包输出的目录，publicPath 指定项目部署的基础路径。

添加插件

使用以下命令安装插件：

Copy Code
npm install -D vue-cli-plugin-style-resources-loader

在 vue.config.js 中添加以下内容：

javascriptCopy Code
const StyleResourcesLoader = require('vue-cli-plugin-style-resources-loader')

module.exports = {
  // ...
  pluginOptions: {
    ...StyleResourcesLoader.Options({
      patterns: [
        // 添加你的 SCSS 或者 Sass 的全局样式文件路径，
        // 可以添加多个
        path.resolve(__dirname, './src/styles/_variables.scss')
      ]
    })
  }
}

这样就可以在所有组件中使用这些 SCSS 或 Sass 变量了。

实例

使用以上步骤创建一个名为 my-project 的 Vue 项目，并使用以下命令进入项目目录：

Copy Code
cd my-project

然后使用以下命令启动项目：

Copy Code
npm run serve

打开浏览器访问 http://localhost:8080/，即可看到网页显示出“Hello, Vue3!”的内容。

使用以下命令进行项目打包：

Copy Code
npm run build

这将会把项目打包输出到 dist 目录下。