如何在Elixir Phoenix 1.6与esbuild环境下配置Vue.js

如果已有现成的Phoenix 1.6项目，可直接跳过第一步从第二步开始操作。

1. 初始化Phoenix项目 #

• 创建项目：mix phx.new your_project_name
• 进入项目根目录：cd your_project_name
• 安装后端依赖：mix deps.get

2. 安装Vue及对应esbuild插件 #

进入assets目录执行安装命令，根据使用的Vue版本选择对应指令：

• Vue 3.x：npm install vue esbuild-plugin-vue@next --save
• Vue 2.x：npm install vue@2 esbuild-plugin-vue2 --save
  安装完成后退回项目根目录：cd ..

3. 修改esbuild构建配置 #

Phoenix 1.6默认的预编译esbuild hex包不支持加载第三方插件，需要改为用npm脚本调用自定义构建逻辑：

• 新建assets/build.js作为自定义构建脚本：

Vue3版本脚本内容：

const esbuild = require('esbuild')
const vuePlugin = require('esbuild-plugin-vue')

esbuild.build({
  entryPoints: ['js/app.js'],
  bundle: true,
  outdir: '../priv/static/assets',
  plugins: [vuePlugin()],
  external: ['/fonts/*', '/images/*'],
  target: 'es2017',
  sourcemap: process.argv.includes('--sourcemap'),
  minify: process.argv.includes('--minify'),
  watch: process.argv.includes('--watch'),
}).catch(() => process.exit(1))

Vue2版本脚本内容：

const esbuild = require('esbuild')
const vuePlugin = require('esbuild-plugin-vue2')

esbuild.build({
  entryPoints: ['js/app.js'],
  bundle: true,
  outdir: '../priv/static/assets',
  plugins: [vuePlugin()],
  external: ['/fonts/*', '/images/*'],
  target: 'es2017',
  sourcemap: process.argv.includes('--sourcemap'),
  minify: process.argv.includes('--minify'),
  watch: process.argv.includes('--watch'),
}).catch(() => process.exit(1))

• 修改assets/package.json，添加构建脚本：

{
  "scripts": {
    "build": "node build.js",
    "build:dev": "node build.js --sourcemap --watch"
  }
}

• 修改config/dev.exs的watchers配置，把默认esbuild监听替换为npm构建命令，注意替换配置中的your_project_name为实际项目名：

config :your_project_name, YourProjectNameWeb.Endpoint,
  watchers: [
    npm: ["run", "build:dev", cd: Path.expand("../assets", __DIR__)]
  ]

4. 编写Vue初始化代码 #

• 修改assets/js/app.js，添加Vue实例初始化逻辑：

Vue3版本代码：

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

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

Vue2版本代码：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#vue-app')

• 新建assets/js/App.vue作为根组件示例：

<template>
  <div class="vue-root">
    <h1>Hello Vue + Phoenix 1.6 + esbuild!</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '配置成功'
    }
  }
}
</script>

<style scoped>
.vue-root {
  padding: 2rem;
  text-align: center;
}
</style>

5. 添加Vue挂载节点 #

找到需要渲染Vue内容的Phoenix模板文件，比如lib/your_project_name_web/templates/page/index.html.heex，添加挂载容器：

<div id="vue-app"></div>

6. 测试运行 #

• 启动Phoenix服务：mix phx.server
• 访问默认本地地址http://localhost:4000即可看到Vue组件渲染的内容。

注意：如果需要支持Vue单文件组件的拓展语法（比如setup语法糖、TypeScript），可安装对应esbuild插件后添加到build.js的plugins数组中即可。

内容的提问来源于stack exchange，提问作者Loading...