vue+freemarker中遇到的坑及解决

下面是“vue+freemarker中遇到的坑及解决”的完整攻略：

坑1：Freemarker渲染Vue模板时Vue指令失效

有时候，在Freemarker中使用Vue时会出现Vue指令失效的问题，这是因为Freemarker本身也有语法冲突，导致与Vue的指令产生冲突。解决方法如下：

1. 对于出现冲突的Freemarker语句，使用<#noparse>标签进行转义，例如：
   <#noparse>
<div v-if="isShow">{{ message }}</div>
<!--#noparse-->
2. 对于整个Vue模板，在<#noparse>标签内进行转义，例如：
   <#noparse>
<div id="app">
{{ message }}
</div>
<!--#noparse-->

坑2：使用webpack打包时静态资源路径出错

在使用webpack打包时，如果静态资源的路径配置不正确，就会出现无法加载静态资源的情况。解决方法如下：

1. 在webpack配置文件中，使用 output.publicPath属性指定静态资源路径，例如：
   output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].[hash].js',
publicPath: '/'
}
2. 在Freemarker中引入js和css时，也要使用res.ctxPath变量来指定静态资源路径，例如：
   ```
   

```

示例1: 使用<#noparse>解决vue指令失效

Freemarker代码：

<#noparse>
  <div v-if="isShow">{{ message }}</div>
</#noparse>

编译之后的Vue代码：

<div v-if="isShow">{{ message }}</div>

示例2：使用webpack和res.ctxPath指定静态资源路径

webpack配置文件：

output: {
  path: path.resolve(__dirname, './dist'),
  filename: '[name].[hash].js',
  publicPath: '/'
}

Freemarker代码：

<link rel="stylesheet" href="${res.ctxPath}/static/css/app.css">
<script src="${res.ctxPath}/static/js/app.js"></script>

编译之后的HTML代码：

<link rel="stylesheet" href="/static/css/app.[hash].css">
<script src="/static/js/app.[hash].js"></script>