adjusted templates to have different css for NVW

added copy-webpack-plugin to webpack config for web/nvw projects
adjusted output path for url-loader fallback to file-loader

Author: jawa-the-hutt

generator/templates/simple/without-nvw/src/components/HelloWorld.vue

@@ -15,8 +15,6 @@
 </template>
 <%_ } else { _%>
 <%_ } _%>
-
-
 <%_ if (!usingTS) { _%>
   <%_ if (!usingNVW) { _%>
 <script>
@@ -78,7 +76,6 @@
 </script>
   <%_ } _%>  
 <%_ } _%>
-
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <%_ if (rootOptions.cssPreprocessor !== 'stylus') { _%>
 <style scoped<%-
@@ -98,13 +95,22 @@
     text-align: center;
   }
 
+  <%_ if (!usingNVW) { _%>
   img {
     height: 20%;
     width: 20%;
     display: block;
     margin: auto;
     margin-top: 4em;
   }
+  <%_ } else { _%>
+  <%# Is using NVW %>
+  img {
+    display: block;
+    margin: auto;
+    margin-top: 4em;
+  }
+  <%_ } _%>
 </style>
 <%_ } else { _%>
 <style scoped lang="stylus">
@@ -114,12 +120,18 @@
     margin auto 
     margin-top 4em
     text-align center
-
+<%_ if (!usingNVW) { _%>
   .img
     height 20%
     width 20%
     display block
     margin auto
     margin-top 4em
-</style>
+  <%_ } else { _%>
+  <%# Is using NVW %>
+  .img
+    display block
+    margin auto
+    margin-top 4em
+  <%_ } _%></style>
 <%_ } _%>

generator/templates/simple/without-nvw/src/views/About.vue

@@ -27,7 +27,6 @@
 </template>
   <%_ } _%>
 <%_ } _%>
-
 <%_ if (!rootOptions.router) { _%>
   <%_ if (!usingTS) { _%>
     <%_ if (!usingNVW) { _%>

generator/templates/simple/without-nvw/src/views/Home.vue

@@ -30,7 +30,6 @@
 </template>
   <%_ } _%>
 <%_ } _%>
-
 <%_ if (!rootOptions.router) { _%>
   <%_ if (!usingTS) { _%>
     <%_ if (!usingNVW) { _%>
@@ -140,9 +139,6 @@
     <%_ } _%>
   <%_ } _%>
 <%_ } _%>
-
-
-
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <%_ if (rootOptions.cssPreprocessor !== 'stylus') { _%>
 <style scoped<%-
@@ -152,17 +148,39 @@
           ? 'scss'
           : rootOptions.cssPreprocessor
       }"`
-    : ``
-%>>
+    : `` %>>
+  <%_ if (!usingNVW) { _%>
   img {
     height: 20%;
     width: 20%;
+    display: block;
+    margin: auto;
+    margin-top: 4em;
   }
+  <%_ } else { _%>
+  <%# Is using NVW %>
+  img {
+    display: block;
+    margin: auto;
+    margin-top: 4em;
+  }
+  <%_ } _%>
 </style>
 <%_ } else { _%>
 <style scoped lang="stylus">
+  <%_ if (!usingNVW) { _%>
   img
     height 20%
     width 20%
+    display: block;
+    margin: auto;
+    margin-top: 4em;
+  <%_ } else { _%>
+  <%# Is using NVW %>
+  img
+    display: block;
+    margin: auto;
+    margin-top: 4em;
+  <%_ } _%>
 </style>
 <%_ } _%>

index.js

@@ -31,7 +31,7 @@ module.exports = (api, projectOptions) => {
   const appMode = platform === 'android' ? 'native' : platform === 'ios' ? 'native' : 'web';
   process.env.VUE_APP_MODE = appMode;
 
-  projectOptions.outputDir = path.join(api.service.context, appMode === 'web' ? 'platforms/web' : nsWebpack.getAppPath(platform, api.service.context));
+  projectOptions.outputDir = path.join(api.service.context, appMode === 'web' ? 'dist' : nsWebpack.getAppPath(platform, api.service.context));
 
   return appMode === 'web' ? webConfig(api, projectOptions, env, appMode, jsOrTs) : nativeConfig(api, projectOptions, env, platform, jsOrTs);
 
@@ -567,7 +567,17 @@ const webConfig = (api, projectOptions, env, appMode, jsOrTs) => {
       }, config.module.rule('vue').uses.get('vue-loader').get('options')))
       .end()
 
+    const imageLoaderOptions = config.module.rule('images').uses.get('url-loader').get('options');
+    imageLoaderOptions.fallback.options.name = 'assets/[name].[ext]';
+    config.module.rules.delete('images')
 
+    config.module
+    .rule('images')
+    .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
+    .use('url-loader')
+    .loader('url-loader')
+    .options(imageLoaderOptions)
+    .end()
 
     // Define useful constants like TNS_WEBPACK
     config.plugin('define')
@@ -587,6 +597,48 @@ const webConfig = (api, projectOptions, env, appMode, jsOrTs) => {
       }])
       .end();
 
+
+    // Copy assets to out dir. Add your own globs as needed.
+    // if the project is native-only then we want to copy files 
+    // from the app directory and not the src directory as at
+    // that point, the src directory should have been removed 
+    // when the plugin was originally invoked.
+    config.plugin('copy-assets')
+      .use(CopyWebpackPlugin, [
+        [{
+            from: {
+              glob: path.resolve(api.resolve('src'), 'fonts/**')
+            },
+            to: path.join(projectOptions.outputDir, 'fonts/'),
+            flatten: true
+          },
+          {
+            from: {
+              glob: path.resolve(api.resolve('src'), '**/*.jpg')
+            },
+            to: path.join(projectOptions.outputDir, 'assets'),
+            flatten: true
+          },
+          {
+            from: {
+              glob: path.resolve(api.resolve('src'), '**/*.png')
+            },
+            to: path.join(projectOptions.outputDir, 'assets/'),
+            flatten: true
+          },
+          {
+            from: {
+              glob: path.resolve(api.resolve('src'), 'assets/**/*')
+            },
+            to: path.join(projectOptions.outputDir, 'assets/'),
+            flatten: true
+          },
+        ], {
+          //ignore: [`${path.relative(appPath, appResourcesFullPath)}/**`]
+        }
+      ])
+      .end();
+
     // only adjust ts-loaders when we're using typescript in the project
     if (api.hasPlugin('typescript')) {
       const tsConfigOptions = config.module.rule('ts').uses.get('ts-loader').get('options');