You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+87-6Lines changed: 87 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -53,8 +53,90 @@ You will have several options in serving and building the project:
53
53
5.`npm run build:android`
54
54
6.`npm run build:ios`
55
55
56
+
56
57
The basic `serve` and `build` options should be similar to what is in a CLI 3 project except the added options to dictate which kind of environment you are using: `web`, `android` or `ios`. Please note that when building web projects, they will output to `dist` and when building native projects, they will output to `platforms\android` or `platforms\ios` depending on which you are building at the time.
57
58
59
+
### Debugging your project
60
+
You will have the standard options for debugging available to you as you would with just `tns`. You can do the following to debug Native versions of your app.
61
+
1.`npm run debug:android`
62
+
2.`npm run debug:ios`
63
+
64
+
You should then be able to attach the Chrome debugger as you normally would via the [NativeScript docs](https://docs.nativescript.org/angular/tooling/debugging/chrome-devtools).
65
+
66
+
You should also be able to debug directly in VSCode. The [NativeScript VSCode Extension docs](https://docs.nativescript.org/angular/tooling/visual-studio-code-extension) are a good place to start with understanding how to do this. However, you will need to modify your `launch.json` file to force `tns` to work properly with VUE CLI 3.
67
+
68
+
Your `launch.json` file should look something like below. Notice the different in the `tnsArgs` line that is different than what is in the documentation link above.
You will also need to modify your `vue.config.js` file to include a `webpack-chain` statement that will setup your source map. It should look something like this:
126
+
```
127
+
module.exports = {
128
+
chainWebpack: config => {
129
+
config
130
+
.devtool('inline-source-map')
131
+
}
132
+
}
133
+
```
134
+
135
+
### Previewing your Project
136
+
You should be able to use the NativeScript Playground and Preview Apps via the following npm statements:
137
+
1.`npm run preview:android`
138
+
2.`npm run preview:ios`
139
+
58
140
#### --env command line recognition
59
141
Basic support for passing the `env` command line option is in place, but has a slightly different syntax since we're working with the CLI 3 webpack infrastructure. To inject items into `env` at run-time, you will need to add `-- --env.option` Where option is one of the recognized options that Nativescript-Vue and this project supports.
60
142
An example of this would be something like this: `npm run serve:android -- --env.production`. This would allow you to serve up a Production build of your Android app versus just running `npm run serve:android` which would serve a Development version of the same.
@@ -66,13 +148,11 @@ Each time the project is built or served, the plugin will copy the latest webpac
66
148
67
149
#### Inspecting the Webpack config
68
150
If you'd like to see what the webpack config is doing then you can run one of the following:
69
-
1.`npm run inspect:android`
70
-
2.`npm run inspect:ios`
71
-
3.`npm run inspect:web`
72
-
73
-
These will default to showing you the Development version of the webpack config. You can pass in the `-- --env.production` option to see the Production version of the config.
151
+
1.`vue inspect -- --env.android > out-android.js`
152
+
2.`vue inspect -- --env.ios > out-android.js`
153
+
3.`vue inspect -- --env.web > out-web.js`
74
154
75
-
If you'd like to control this on your own and not use the provided `npm scripts` then you can do something like: `vue inspect --mode development.web > output.js` and the `output.js` file in root will show you what's going on. Subtitute `development.android` or `production.ios`, etc to see the different configs based on the environmental variables.
155
+
These will default to showing you the Development version of the webpack config. You can pass in the `-- --env.production` option to see the Production version of the config. Subtitute `development.android` or `production.ios`, etc to see the different configs based on the environmental variables.
76
156
77
157
#### Aliases
78
158
Prebuilt in the webpack config are several aliases that you can use. Here is a table listing out the various alias and the folder they use based on the environment chosen:
@@ -85,6 +165,7 @@ Prebuilt in the webpack config are several aliases that you can use. Here is a
0 commit comments