Question

我在资产/文件夹中安装了npm install的vuejs，并在priv / static / js / list_show.js中创建了一个list_show.js文件。当我在list_show.js中执行import Vue from "vue"时，它不起作用，并且在控制台中收到以下消息：“ Uncaught SyntaxError：Unexpected identifier”。

如何在我的static / js /文件夹中导入模块？（我默认使用Phoenix 1.4和Webpack）

Answer 1

您不应在.js目录中创建/priv/static/js文件。而是使用/assets目录。

Phoenix 1.4使用Webpack将js中的/assets文件捆绑为一个单独的app.js文件，该文件将放入/priv/static/js中。作为应用程序的切入点，您可以使用/assets/js/app.js，以下行将加载Vue：

import Vue from 'vue';

new Vue({
  // ...
});

（只要您将其导入.js中，您也可以将此代码放入单独的app.js文件中）

但是，如果您需要用于不同路由的静态js文件，则此解决方案将无济于事。您可能希望始终渲染priv/static/js/app.js，但仅在特定布局上呈现特定文件。只需稍微修改priv/static/js并添加更多入口点，即可在webpack.config.js中实现多个输出文件：

entry: {
  app: ['./js/app.js'].concat(glob.sync('./vendor/**/*.js')),
  special: ['./js/special.js']
},
output: {
  filename: '[name].js',
  path: path.resolve(__dirname, '../priv/static/js')},
}

使用此配置，将创建两个文件：

priv/static/js/app.js-包含所有供应商文件和app.js
priv/static/js/special.js-仅包含special.js

special.js文件可以包含在Phoenix中，然后：

 <script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/special.js") %>"></script>

从Phoenix 1.4中的priv / static / js文件夹导入节点模块

1 个答案: